CSS gradients in IE9

Question

I tried using the "ultimate CSS gradient generator" and it produced the following:

background: #657575; /* Old browsers */
background: -moz-linear-gradient(left, #657575 0%, #758585 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#657575), color-stop(100%,#758585)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #657575 0%,#758585 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #657575 0%,#758585 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #657575 0%,#758585 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#657575', endColorstr='#758585',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, #657575 0%,#758585 100%); /* W3C */

But is seems that the gradient does not work at least with my version of IE9. So is there any way I can produce a simple horizontal gradient with IE9?

possible duplicate of [Gradients in Internet Explorer 9](http://stackoverflow.com/questions/3934693/gradients-in-internet-explorer-9) — bzlm, Sep 13 '11 at 16:39

score 3 · Accepted Answer · edited May 23 '17 at 11:44

3

Does IE9 support CSS linear gradients?

background:#fff;
background-image: -moz-linear-gradient(top, #fff, #000);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #000));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/

edited May 23 '17 at 11:44

Community

1
1

answered Sep 13 '11 at 16:48

Tom

12,591
13
72
112

For a horizontal gradient (as mentioned in the question) you'll want GradientType=1. Documented here: http://msdn.microsoft.com/en-us/library/ms532887(v=vs.85).aspx – Greg Ball Sep 25 '14 at 05:42

score 0 · Answer 2 · answered Sep 13 '11 at 16:59

Here is a site that might help you regarding CSS gradients:
http://www.htmlcenter.com/blog/cross-browser-gradient-backgrounds/

In my option, for fixed height elements I usually use a 1px image and repeat that image across the width of the element. That way you know it will look the same in all browsers.

Example:

.element{
height: 30px;
background: url(<1px image location>) repeat-x;
}

There are also websites that will create these gradient images for you.
Here is one that is free to use:
http://www.ogim.4u2ges.com/gradient-image-maker.asp

This is an old way of doing this. Css gradients are now the way to go. You can also use less or sass mix-ins to make this easier — jaredmahan, Jan 18 '16 at 17:20

CSS gradients in IE9

2 Answers2