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 must admit that I enjoyed reading your creative article as you did put pen and paper together to write such a flowing article
how about Opera.??
Thanks for posting this article. I was almost ready to give up and go back to button images rather than gradients. You saved me a lot of time.
Daniel — I think the problem is that IE doesn’t like it when you try to use the abbreviated 3 digit hexcode for the color, as compared to the full 6 digit code. Try ‘ffffff’ instead of ‘fff’ and it should work!
I want left to right gradient.
This is a really great problem resolved, because cross-browsing it is a big issue at this point.
But i don’t see how you can control the gradient’s dimensions, or -for instance – to repeat or not, to take 80% or 100% of background’s height – maybe you have an ideea?
Tanks!
i just visited this website right now and find it nice . the design, i was really amazed on how did they make it possible to build a site like this. is there a tutorial on how something like this site could made possible. example is this comments list. showing comments the way it shows here was really creative. is there some one who could give idea on how to build something like the way the comments shows here. the design was really amazing
1321423 rq 214 132
Is left – right gradient possible? Web Design Inspiration Gallery
Really a great tutorial, i used this gradient effect. Thanks a lot dude!
Wow, great tip! Thanks for sharing, using this for checkout buttons without images for my shopping system :D.
Just what I needed right now. Thanks.
really interesting gradient and the code works like a charm!
this cross-browsing issue it’s a very sensitive one, i have a lot of trouble with all these versions of browsers…
This article will prove useful to many people.
However, the IE filter will only work for versions 5.5 to 7. You need the -ms prefixed version for IE8.
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#cccccc’, EndColorStr=’#000000′)”;
interesting
This week Opera releases version 11.10 with css gradients support :)
What about IE9 ??
Many thanks for sharing, nice tip..
Your updated dropdown menu in the demo using CSS gradient is amazing!
This article taught me how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Must read! From blog to blog!!!
Dropdown menu looks cool in browsers. In IE9, li’s don’t take the border-radius, so they are plain rectangles.. Just another thing that is great but you cannot use it generally without a hack. Thank you, microsoft! Maybe in IE10.