CSS3 Gradient problem in IE

Why this CSS 3 gradiant does not work in IE9. It only shows the plain background color, no any gradiant. Is there something wrong with it? Thanks.

background: #999; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 
background: -webkit-gradient(linear, left top, left botto开发者_StackOverflowm, from(#ccc), to(#000)); 
background: -moz-linear-gradient(top,  #ccc,  #000);

---

Does IE9 actually support gradients? I know it doesn't support a lot of CSS3. You could try looking at this article, it has a workaround for IE when using gradients.

In regards to your code, you may also need the line:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')"; 

Or add the GradientType=0 into your filter string also. (From this site)

---

Here is a nice workaround solution using PHP to return an SVG gradient instead, which allows us to keep our design in our stylesheets.

<?

header('Content-type: image/svg+xml; charset=utf-8');
echo '<?xml version="1.0"?>
';

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
            <stop offset="0%" stop-color="#<?=$from_stop?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?=$to_stop?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" style="fill: url(#linear-gradient);"/>
</svg>

Simply upload it to your server and call the URL like so:

gradient.php?from=f00&to=00f

This can be used in conjunction with your CSS3 gradients like this:

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

If you need to target below IE9, you can still use the old proprietary 'filter' method:

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

Of course you can amend the PHP code to add more stops on the gradient, or make it more sophisticated (radial gradients, transparency etc.) but this is great for those simple (vertical) linear gradients.

---

You have this code:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

I think you should change this to:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCCFF, endColorstr=#000000FF);

---

The best solution for gradients on IE is to use a gradient image and repeat-x. Put that in the background and where you want it. Not all browsers draw gradients cleanly, and they disappear sometimes when you do.

<table id="tabs_desc" cellpadding="0" cellspacing="0" width="100%"
  style="
    background:url('blue_gradient.png') transparent repeat-x;
    *background:url('blue_gradient_long.png') transparent repeat-y; /* Special for IE */
    width:  100%;
    background-size: contain;
    color:  #fff;
    padding: 10px;
    font-family:  Calibri;
    font-size:  11pt;
    font-weight:  bold;
    "
> ...

Hope this helps!