Ie9 Gradient + Image

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

Gradients in Internet Explorer 9

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

IE9 gradient + image

According to the Microsoft Developer Network, you can "apply multiple filters", by separating them with spaces.

Using the following code (no comma between the two filters) should work:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Controls/Calendar/Events/email.png') progid:DXImageTransform.Microsoft.gradient( startColorstr='#D9D9D9', endColorstr='#989898',GradientType=0 ); /* IE6-9 */

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/

How to make background-image with linear-gradient work on IE 11?

linear-gradient() is supported unprefixed on IE10 RTM and later, including IE11. You never need the -ms- prefix — only the pre-release versions of IE10 required it and those versions don't even run anymore. You're just wasting space by including the prefix in your CSS.

Note that the directional syntax for linear-gradient() is different; what was originally top is now represented as to bottom instead (see this blog post, this question, and the spec for details):

background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);