CSS gradient on a pseudo element in IE9

Question

Knows someone a solution for setting a CSS gradient on a pseudo element in IE9?

This is my approach:

http://jsbin.com/iquhut/edit#html,live

It seems like filter does not apply on pseudo elements or I missed something out?

Answer 1

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; 

Answer 2

Use images. IE9 does not support css gradients (-ms- prefix works for IE10 only), and dx filters (which you used in exapmle code) are very bad for performance (and buggy).

Alternatively, you can use canvas to render gradient, and then set that gradient as data-url background for your element.

Alternatively, you might use SVG gradient backgrounds, but then you will need to hide them from other browsers (good thing, we still have conditional comments in ie9). Keep in mind they are buggy too. But not as buggy as filters.