Using CSS3 PIE for Gradient effect in IE8

Question

I am using CSS3PIE to generate gradient background for a div.

-pie-background: linear-gradient(#BFBBBB, #FFFFFF);

Above code renders the desired effect. But this fills the complete height of div with gradient.

I need to restrict the gradient upto few pixels (or percentage) from top of the div.

CSS3 equivalent for Chrome is

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #BFBBBB), color-stop(30%, #FFFFFF));

The key here is color-stop(30%, #FFFFFF). If you have used CSS3 PIE earlier, please suggest how to obtain color-stop property with CSS3-PIE.

lojjic lojjic · Accepted Answer · 2012-12-14T15:57:39

linear-gradient(#BFBBBB, #FFFFFF 30%);

PIE uses the standard gradient syntax (with the exception of the direction parameter which has been changed in the spec but not yet updated within PIE.)

Speaking of which, you should also be using the standard syntax (prefixed where necessary) for other browsers as well. The old -webkit-gradient syntax is no longer the current preferred syntax.

Using CSS3 PIE for Gradient effect in IE8

1 Answers