Is there a CSS gradient alternative to CSS 'filter' for IE9 and below? (that isn't JS or a plugin)

Question

I'm on the look out for any alternative methods to produce vertical linear gradients (two colors), starting with the dark color at the top, and progressing to the light color at the bottom.

These methods are for both IE9 and IE8.

As it happens, I've tried the CSS property filter, but to no avail. It doesn't seem to want to work in IE9 or below, and I'd preferably like to use a different method anyway.

I've tried ColorZilla's gradient generator, which also provides the SVG method, but I have no idea where to start with that as it's just a random string of alphanumeric characters that I can't get my head around.

Please let me stress that I don't want any form of JS/jQuery method or plugin of any kind as I'm trying to keep my UI friendly for those with scripts disabled.

I'm simply searching for any other CSS methods which can be used?

Thank you, Dylan.

Edit

Here is a live example of the problem. The gradient for the breadcrumb current position doesn't appear in IE9 or below.

Answer 1

Credit for the answer goes to @davidpauljunior.

I think this is to do with the tag. If you add the CSS rule display: inline-block the gradient shows up.

Cheers guys!

Answer 2

The following is the correct CSS for gradients in IE6-IE9.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#4096ee',GradientType=0 );

There isn't really an alternative - thats the correct CSS for it.

If you get stuck use an online generator such as: http://gradients.glrzad.com/ http://www.colorzilla.com/gradient-editor/

You don't need the SVG method, thats only for multistop gradients. For a simple gradient such as what you need (light to dark, top to bottom), then the generator will work perfectly for you.

Answer 3

The short answer is that trying to do gradients in IE<=9 is a royal pain.

• The filter method sucks (and has some nasty bugs too).

• The SVG method is difficult to work with, bandwidth heavy, and in any case it only deals with IE9.

The only sane solutions you have are:

1. Just accept that IE<=9 won't do gradients, and provide a sensible solid-colour fallback for them.

2. Throw away all your nice CSS gradients and use an old-skool PNG background graphic instead.

3. Swallow your anti-JS-library bias and use the CSS3Pie library.

Personally, I'd go with option 3. You can always still provide a solid-colour fallback for users with JS switched off.

If you're really not prepared to do that, then I'm afraid that your only remaining sensible solution is an old-fashioned background image.