Does IE9 support CSS linear gradients?
Solution 1:
The best cross-browser solution is
background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
height: 1%;/*For IE7*/
Solution 2:
Well, IE9 is not done yet, but so far it looks like you're going to have to use SVG. I'm not aware of any -ms-gradient or gradient support in IE9. The other thing that's missing so far that I'm annoyed about is text-shadow.
http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/
Solution 3:
The best cross-browser solution regarding IE 9+, that is conforming to W3C standards (doesn't result in an error in CSS validator) is the following:
background-color: #fff; /* Browsers without linear-gradient support */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */
background-image: -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */
background-image: linear-gradient(#fff 0%, #000 100%); /* W3C */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";
.gradient--test {
background-color: #fff; /* Browsers without linear-gradient support */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */
background-image: -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */
background-image: linear-gradient(#fff 0%, #000 100%); /* W3C */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";
}
.gradient--test {
width: 61.8%;
height: 200px;
}
<div class=gradient--test></div>
IE 9 introduced the vendor prefix -ms-filter
notation, that is according to standards, at the same time deprecated the proprietary filters.
Neither -o-
vendor prefix is necessary, nor -ms-
(as IE 10 is the first IE to support gradients and it does support the W3C standards syntax). See http://caniuse.com/#feat=css-gradients
Prefer lowercase hex color values for better gzipping, and clearly state background-color
and background-image
instead of background
, because it could result in rendering errors in browsers without linear gradient support.
Largely copied from my answer for this question.