Does IE9 support CSS linear gradients?

Question

With Chrome/Safari and Firefox there's the -webkit-gradient and -moz-linear-gradient properties. How can I do this same sort of thing with IE9?

Ostracoderm

Answer 1

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/

Tshombe

Even with the latest and greatest RC? Per the RC moniker, is it safe to assume that text-shadow and image gradients are not going to make their way into the release? – Ostracoderm

Update: I've played around with IE9 RC1, and it does not support CSS3 gradients. It does still support the proprietary MS gradient syntax, but those are very simple and cannot only have a start and stop color, so they are not equivalent in my book. It also ignores text-shadow. Someone asked about that on the IE9 twitter feed, and the answer was pretty vague and non-committal. The best URL to keep track of all the IE9 changes is: msdn.microsoft.com/en-us/ie/ff468705 – Tshombe

Thanks Chad! I suspected there wasn't simple support for it. – Ostracoderm

Text shadow has been available in IE since at least IE6, although it requires javascript, or very non-standard CSS in newer versions. See whattheheadsaid.com/2011/05/… – Kingcup

Answer 2

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*/ 

Dragnet

In IE9 that filter will (as far as I know) overflow border-radius (rounded corners).... – Eclectic

The solution is overflowing the border radius as Oskar said... Did you guys have any work around for that to avoid in IE 9? Thanks – Torrance

i had to turn the filter off. the border-radius overflow was too ugly. – Obadiah

How do I get rid of the ActiveX script in IE9? – Billfish

Answer 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.

Cymar