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?

goksel · Answer 1 · 2012-02-16T00:16:54.703

62

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

edited Feb 16 '12 at 00:16

answered Apr 21 '11 at 14:22

goksel

4,450
3
42
51

17

In IE9 that filter will (as far as I know) overflow border-radius (rounded corners).... – Oskar Duveborn Jul 27 '12 at 13:41
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 – Ravi Aug 09 '12 at 09:35
1

i had to turn the filter off. the border-radius overflow was too ugly. – courtsimas Sep 18 '12 at 19:50
How do I get rid of the ActiveX script in IE9? – crh225 Mar 26 '13 at 15:58

score 6 · Accepted Answer · answered Feb 10 '11 at 19:35

6

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/

answered Feb 10 '11 at 19:35

Chad Lundgren

378
2
7

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? – James Alexander Feb 10 '11 at 19:44
2

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: http://msdn.microsoft.com/en-us/ie/ff468705 – Chad Lundgren Feb 10 '11 at 21:49
Thanks Chad! I suspected there wasn't simple support for it. – James Alexander Feb 12 '11 at 16:45
Text shadow has been available in IE since at least IE6, although it requires javascript, or very non-standard CSS in newer versions. See http://whattheheadsaid.com/2011/05/creating-a-nice-text-shadow-in-internet-explorer – fabspro Jul 19 '12 at 11:08

score 1 · Answer 3 · answered Mar 14 '16 at 05:00

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.

Does IE9 support CSS linear gradients?

3 Answers3

Linked

Related