The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu (demo) using CSS gradient.
For Webkit Browsers
The following line of code is for webkit browsers such as Safari, Chrome, etc. It will display a linear gradient from top (#ccc) to bottom (#000).
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
For Firefox 3.6+
background: -moz-linear-gradient(top, #ccc, #000);
For Internet Explorer
The following filter wlil only be read by IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
Cross-Browser CSS Gradient (demo)
Put the three lines of code from above together and the result is a cross-browser gradient box. Note: I added a background rule at the very top in case the user is using a browser that doesn't support the feature.
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
CSS Gradient Dropdown Menu
Below is a pure CSS gradient dropdown menu using CSS3 text-shadow, radius-border, and box-shadow (no Javascript or image)
Internet Explorer Limitations
Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
Final Remarks
Please note not all browsers support CSS gradient. To be safe, you shouldn't rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.
I loved it. Thanks for posting this.
A nice little technique!
Cool. Thanks for posting this.
Thanks for this great post :-) the example image of the CSS Gradient Dropdown Menu is very nice.
While internet explorer doesn’t fully support gradient angle it does have the GradientType property.
It has two possible values:
0 vertical (default)
1 horizontal
When you apply a filter in internet explorer it renders the text in that element with jaggys instead of using cleartype. Your menu has this problem on rollover.
Also see Gradient Filter on msdn
Interestingly, the only bad thing is Explorer always crashing. ;)
labai ivairu, isradinga!
Great demo and tutorial.
Good stuff! This is what I did and it works great. I even went a step further and built a IE-specific stylesheet for the filter gradient fix. I’ve seen some examples use “background-image” instead of “background”. I would think “background” is right, and this hopefully confirms it. Any evidence that points to “background-image” being a better solution?
Nice tut…thanks for sharing!!! ✌
Very nice tut, i think this make my work a bit faster in future.
Thx for sharing this!
Nice tutorial, thanks! Just and FYI for folks out there. The demo only works properly in IE 8. Gradient works in IE 7, the drop-down has issues, and his doesn’t work in IE 6 at all (which really should die but some clients refuse to upgrade).
The biggest issue with using gradients for IE is that it breaks cleartype which makes the text ugly and unreadable half the time. The problem showed up in IE7 but it wasn’t fixed in IE8. Microsoft should just quit trying to make browsers already.
“It should only be used for enhancing the layout.” I think this is right on. CSS3 only styling should be an enhancement until the majority of browsers are using CSS3. well put
It’s not really cross-browser. It doesn’t work on latest version of Opera 10.50. It’s clear that the CSS code considers only FF, Chrome, Safari and IE and forgets Opera :)
If you’re using multiple effects with IE which rely on filter:, they all need to be in the same filter: declaration. I had different classes for rotation, shadows, etc, but IE would only apply the last applicable class in the stylesheet. I had to add IE classes for each combination of filter: rules.
It’s too bad Opera hasn’t implemented CSS gradients, especially with Opera Mini topping the iPhone app store charts.
Have you guys seen/used http://csscorners.com for this stuff? doesn’t have the IE gradient code but who uses IE anyway
Oh my goodness, why can’t Firefox use the same syntax as Webkit chose? Way to make this harder than it should be, guys. :-/
Really nice technique; I think I’ll use it in the near future. Thanks
Filter = Proprietary code = bad. It is not a standard and shouldn’t be used. Some things really don’t need to be cross browser – if you have to use a gradient in IE, fall back to an image background.