I am working on branding SP2013 and everything is working except for IE9 support the gradient. I tried adding in,

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;

but it did not fix the issue and SP2013 dev console did not like the syntax. Is there a way to do this or should I just do it via an image tag?

1 Answer 1


AFAIK IE9 has dropped support for filter and moved on to use -ms-filter which itself has been dropped in IE10 ;-)

Basically, to make things work in IE8/9 use:

filter: alpha(opacity=40);
-ms-filter: "alpha(opacity=40)";

And in IE10+ we can finally use the CSS standard opacity property :-)

For more info, see also:

https://stackoverflow.com/questions/6900647/ms-filter-vs-filter-whats-the-difference and http://msdn.microsoft.com/en-us/library/ie/ms530752%28v=vs.85%29.aspx

As for CSS3 gradients, IE9 does not support them and you need to use an SVG workaround as seen here: https://ie.microsoft.com/TESTDRIVE/Graphics/SVGGradientBackgroundMaker/Default.html

IE10 finally has support for CSS3 gradients as per W3C standard.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.