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.
Thanks for the tips. I used this in one of my designs today ;)
Thanks for this snippet! Works like a charm with no alteration.
Don’t follow these blindly anymore. All major browsers support official syntax for CSS gradients.
Use something like:
-webkit-linear-gradient(…)
-moz-linear-gradient(…)
-o-linear-gradient(…)
-ms-linear-gradient(…)
linear-gradient(…)
No need for old webkit crap (unless you really want to stay compatible with old webkit).
And “filter” might be useful too as IE supports CSS gradients from version 9 only.
Agreed witz Diz, this solution is everything but cross-browser. It uses a filter for IE, and two vendor-specific prefixes for webkit and firefox … you cannot get any less cross-browser.
are you an idiot or just not know what your talking about?
I dunno, just putting the 3 lines in the post didn’t work in every browser for me, but after using Diz’s method it worked.
Look at the date of the post before complaining that something doesn’t work. In the world of web browsers and CSS3 support, do you really expect a post that’s over a year old to still be completely valid?
Thanks for the Gradient Tips I Used for an Tool Tip and it’s working fine.
That was amazing….
But what for Opera and safari ? :(
See: Safari IS built on webkit
Best post, with using this trick I think no need to use ‘canvas’ tag of HTML5 if you want browser compatibility, cheeeeers.
Thanks for the information of interest.
thanks.. this solve my problem..
Sure solved my IE woes!!! Thanks for a great post!
Thanks for this code.
thank you! good post.
have a quick question. is it possible to load a image if the browser is non css type? and how to do it? thank you again!
thanks for this code…
Very useful tips!!! Thanks for sharing this.
Thanks :)
It’s a great CSS3 feature!
Here’s a complete example;
background: #e0e0e0;
background: -moz-linear-gradient(top, #e0e0e0 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#fff));
background: -webkit-linear-gradient(top, #e0e0e0 0%,#fff 100%);
background: -o-linear-gradient(top, #e0e0e0 0%,#fff 100%);
background: -ms-linear-gradient(top, #e0e0e0 0%,#fff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e0e0e0′, endColorstr=’#fff’,GradientType=0 );
background: linear-gradient(top, #e0e0e0 0%,#fff 100%);
nice tip…..
Thanks, nice tip used today.
That’s a great step-by-step tutorial. Thanks for sharing your knwledge!
Im trying to apply a gradient as a background to a table row but this does not seem to work in IE. My implementation does not allow me to use a gradient image. Any suggestions please