Gradient colors in Internet Explorer

Question

I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?

One little note: I found a little bug when working on IE9. If you don't spell out the entire HEX color it won't work correctly. i.e. #cccccc NOT #ccc Hope this helps. — , Oct 14 '11 at 17:02
Be careful of applying gradients to table rows. IE seems to treat those differently, so to get any of the other solutions to this question to work, you'll need to wrap your tr content in a div and apply the gradient to that. — Keith, Mar 01 '12 at 02:21
I believe you're looking for [this specific CSS setting](http://msdn.microsoft.com/en-us/library/ms532997.aspx). — tsilb, Oct 17 '08 at 20:39
In addition to @mdostudio, you can even use #FFFFFFFF (8 characters) where the first two define transparency. Full transparant (FF) to solid color (00). — Neograph734, Dec 14 '12 at 00:24
@user995849: that is not a bug. The `filter: progid:DXImageTransform.Microsoft.gradient-API` simply doesn't accept shorthand CSS color-values. I wrote a fully referenced explanation here: [Why are 3-digit hex color code values interpreted differently in Internet EXPLORER?](http://stackoverflow.com/a/32153998/588079) . That API also has another 'surprise': it's full format (including alpha) is actually `aarrggbb` and NOT `rrggbbaa` — GitaarLAB, Aug 28 '15 at 20:19

Blowsie · Answer 1 · 2012-06-27T08:29:28.580

83

The code I use for all browser gradients:

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.

Update:

Here is a LESS Mixin (CSS) version for all you LESS users out there:

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

edited Jun 27 '12 at 08:29

answered Jun 18 '10 at 13:09

Blowsie

40,239
15
88
108

3

Perfect snippet for gradients. zoom:1 is the key to answering this question though. – Voltin May 16 '11 at 18:16
2

@Blowsie I am having trouble with gradients when used in conjunction with a border radius. In that the background effectively squares off the corners. Obviously dependant on the colour range selected the background fills out the corners. Is there a trick for handling border radius and a background gradient in IE? – codepuppy Nov 22 '12 at 14:45
@codepuppy This is a known bug with no solution, large frameworks like bootstrap have opted for the border-radius with no gradient. – Blowsie Nov 22 '12 at 16:42
1

@codepuppy apparently there's a way to use border-radius AND gradients in IE. http://stackoverflow.com/a/7544248/1446845 – Aurelio Feb 14 '13 at 13:42

score 23 · Accepted Answer · answered Oct 17 '08 at 20:37

23

Look at the custom CSS filters IE can handle http://msdn.microsoft.com/en-us/library/ms532847.aspx

answered Oct 17 '08 at 20:37

Nick

9,113
4
25
29

James Lawruk · Answer 3 · 2015-03-23T00:37:19.180

11

The filter style should work for IE8 and IE9.

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}

edited Mar 23 '15 at 00:37

answered May 28 '10 at 02:26

James Lawruk

30,112
19
130
137

score 7 · Answer 4 · answered Dec 20 '11 at 01:01

A significant gotcha when it comes to gradients in IE is that although you can use Microsoft's filters...

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;

...they kill clear type on any text covered by the gradient. Given that the purpose of gradients is normally to make the UI look better, that's a show stopper for me.

So for IE I use a repeating background image instead. If the background image css is combined with the gradient CSS for other browsers (as per Blowsie's answer), other browsers will ignore the background image in favour of the gradient css, so it will only end up applying to IE.

background-image: url('/Content/Images/button-gradient.png');

There are plenty of sites you can use to quickly generate a gradient background; I use this.

score 6 · Answer 5 · edited Jun 23 '12 at 20:31

Great tool from Microsoft, allows you to examine colors real-time and generates CSS for all browsers: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

score 4 · Answer 6 · answered Mar 23 '11 at 11:04

4

Just thought I'd add this useful link: http://css3please.com/

Shows how to get gradients working in all browsers.

answered Mar 23 '11 at 11:04

Sniffer

6,242
10
45
53

score 3 · Answer 7 · edited Jun 23 '12 at 20:30

3

Note that IE10 will support gradients as follows:

background: -ms-linear-gradient(#017ac1, #00bcdf);

edited Jun 23 '12 at 20:30

Ry-

218,210
55
464
476

answered Jul 15 '11 at 16:50

TimKola

31
1

score 2 · Answer 8 · answered Oct 17 '08 at 20:40

Right from ScriptFX.com article:

<body bgcolor="#000000" topmargin="0" leftmargin="0">

    <div style="width:100%;height:100%; filter: progid:
        DXImageTransform.Microsoft.Gradient (GradientType=1,
        StartColorStr='#FF006600', EndColorStr='#ff456789')">

Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below

    </div>
</body>

score 1 · Answer 9 · edited Jun 23 '12 at 20:34

1

Try this:

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}

edited Jun 23 '12 at 20:34

Ry-

218,210
55
464
476

answered Jun 30 '11 at 15:57

score 0 · Answer 10 · edited Jun 23 '12 at 20:45

0

Two things I discovered while struggling with IE 9 gradient.

The -ms-filter did not work for me. I had to use simply filter.
I had to add height: 100% to my class for IE to use the gradient.

edited Jun 23 '12 at 20:45

Adam Lear

38,111
12
81
101

answered May 06 '12 at 15:45

Vincent

1,741
23
35

1

you might want to check out [CSS3Pie](http://css3pie.com/), which is a script for IE to add support for some CSS features including gradients. It works in IE9 as well. – Spudley May 07 '12 at 05:27

score 0 · Answer 11 · answered Oct 13 '20 at 14:48

In my case I inserted it on header section

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

then in style section insert it

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;

Gradient colors in Internet Explorer

11 Answers11

Linked