How do I modify IE Gradient CSS to use height and a third color?

Question

I have the following CSS for Gradients:

For IE 8-9

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d6d2',]
endColorstr='#f9ffff', GradientType=1);
/* IE 8–9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7d6d2',
endColorstr='#f9ffff', GradientType=1)"; 

For IE 10

background: -ms-linear-gradient(top, #d7d6d2 0%,#f9ffff 437px,#ffffff 100%);

For the IE 10 version I have 3 colors. The first two create the gradient and the third color, which is #ffffff, shows the rest of the page in white color when the gradient has ended. And the 437px defines the height of the gradient.

How can I modify the code for IE 8-9 for CSS Gradients so I can achieve what I have with the IE 10 version?

Answer 1

The best way to do gradients on IE8/9 is to use CSS3Pie.

This is a Javascript polyfill library that implements the standard CSS gradient syntax into old versions of IE. (it also does a few other features like border-radius).

Simply download the Pie.htc file and add it to your site as per the instructions, and you can start using standard CSS gradients in IE 6-9.

To directly answer your question: CSS3Pie's gradients do support gradient colour stops. (But even without that, the improved syntax over -ms-filter is enough motivation for me to want to use it)

Hope that helps.