Does IE9 Support CSS Linear Gradients

Does IE9 support CSS linear gradients?

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/

Gradients in Internet Explorer 9

You still need to use their proprietary filters as of IE9 beta 1.

Whether IE-9 browser support for linear gradient

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.

CSS gradients in IE9

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

Do CSS Gradients work in IE9?

It does not.

See here: http://caniuse.com/#search=gradient

It will support SVG as a background though, which is currently used to make gradients for Opera.

Background image gradient not working with ie9

This is pretty close:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff6900', endColorstr='#ff8214',GradientType=0 );

This works in IE6+.

Or, for JUST IE9, you can replace it with an SVG by using the following styles, if the filter option doesn't float your boat:

Add to .orangeback:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNjkwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjgyMTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

Also add .ie9-gradient class to these elements, and add the following before the closing head tag:

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

To use the SVG polyfill for CSS3 gradients in IE9 you need to disable filter, so this code retains the filter gradient fallback for IE6-8 and uses SVG for IE9.

In your case, there is not really a need to use the SVG polyfill for IE9 because you are using a normal 2 color linear gradient. If you had a more complex gradient the second solution would probably be preferable, but for your purposes just using the filter solution should work fine.

Use this (or a CSS preprocessor) and never worry about CSS3 gradients again: Colorzilla Gradient Generator

linear-gradient not working in IE9 and Safari

For Safari, you will have to put an additional, so-called "vendor-prefixed" version of the definition:

background-image: -webkit-linear-gradient(60deg, rgb(231,110,49), rgb(231,171,49));

For IE9 (which has no support for CSS gradients) you must use an image as a fallback, either png/gif/jpg, or better SVG.

Here is one of many gradient generators that also creates the SVG you want:

http://www.colorzilla.com/gradient-editor/

CSS gradient on a pseudo element in IE9

The almost same effect is possible with a simple box-shadow by setting a negative spread-radius.

inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]

Example: ( http://jsbin.com/ekehoz/edit#html,live )

box-shadow: 0px -15px 30px -10px #888; 

---

Related Topics