Whether IE-9 browser support for linear gradient

Question

I have refered many sites for applying linear gradient to ie-9 and some links are saying not support as well as some link are saying it will work.can any body clear whether we can uselinear gradient or not?

This is my code:

.top_block
{
        position: fixed;
    display: block;
    height: 150px;
    width: 105px;
    z-index: 9999;
    background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D3D3D3));
    background: -moz-linear-gradient(top, #E9E9E9, #D3D3D3);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9E9E9', endColorstr='#D3D3D3',GradientType=0 ); 
    margin-left:72px;
    left: 36%;
    top: 32%;
    border: 6px solid white;
    border-radius: 10px 10px;
    -moz-border-radius: 10px 10px;
    -webkit-border-radius: 10px 10px;
    padding: 15px;
}

I have applied this not working in ie-9 as well as working working fine in firefox and ,chrome.

[Gradients in Internet Explorer 9](http://stackoverflow.com/q/3934693/1693859) — Sam R., May 29 '13 at 12:20

score 4 · Accepted Answer · answered May 29 '13 at 12:40

No, IE9 does not support the standard CSS gradients. This was only introduced in IE10.

IE9 does, however, support the old IE-specific -ms-filter style, in the same way as older IE versions did, so you can use this to generate gradients in IE9.

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#222222', EndColorStr='#AAAAAA')";

However, it is important to note that these filter gradients (and in fact IE's filter styles in general) have a number of bugs and quirks, some of which can make them difficult to work with.

For example, they are incompatible with CSS border-radius. If you use a filter gradient and border-radius on the same element, the gradient background will be displayed on top of the rounded corners and will hide them.

There is no way around this problem using the filter gradients.

So if you need to use gradient backgrounds and rounded corners on the same element in IE9, the best solution is to use a polyfill script such as CSS3Pie, which implements standard CSS gradients into IE9, and does it in a way that is compatible with border-radius.

This isn't the only problem you'll encounter when using filter styles, so my preference would be to avoid using them wherever possible. Polyfill scripts like CSS3Pie generally make things a lot easier to work with, and often do a good job of working around or avoiding the bugs in the fiter styles.

Hope that helps.

RE: filter gradients, there _are_ [ways around it](http://msdn.microsoft.com/en-us/library/ie/jj819731(v=vs.85).aspx) but agreed that it's probably better to avoid it all together. — gitsitgo, Jan 22 '14 at 17:25

Whether IE-9 browser support for linear gradient

1 Answers1