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.
Wow very nice collection! thank you very much.
This is great! I have been looking for a way to take gradients from images to code. I knew you could do it, but my knowledge of “heavy code” is pretty limited. I love it though.. thanks for sharing!
Hi, dear!
I really loved this post! I was looking for something like this. But…. I was testing and in my Opera, and it didn´t appear anything… =(
Someone could give a hand on it?
Tks!!!
I wonder whether it is possible to get gradient in horizontal direction?
Thanks.
I try to follow the examples already. Results have recently been encouraging.
Work is not different. Based on competency of users.
Wonderful! Trying it on a website.. will update if I come up with anything new. Thanks!
This doesn’t seem to work in Firefox 3.5.9 :(
There is a really nice PHP class that will create gradient image on the fly http://planetozh.com/blog/my-projects/images-php-gd-gradient-fill/ – I’ve used it a few times for my css backgrounds. I’m sure with a little skill the class can be expanded to have more options and patterns.
Very cool.
Thanks – will try it on a website soon!
@Michael Mior, the introduction states “but now with the Firefox 3.6+…” — it isn’t supported in any older Firefox version.
thx for gradient tips
Im using Coda for codding in my 2 macs, but this gradient thing didnt seem to work. All my browsers re updated! I get a STRANGE result!!!
well, problem solved :) i was previewing in an empty document. LOL
io solitamente acquisto on line , mi piace perche acquisto da casa , ho molta scelta e posso confrontare i prezzi , l ultimanente ho acquistato una FOTOCAMERA REFLEX NIKON su http://www.tecmania.it , unsa samsung , ricevuta a casa , bellissimo ……
Very useful tut. Thanks a lot!
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, EndColorStr=’#999999′)”; /* for IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, EndColorStr=’#999999′); /* for IE6 & 7 */
This is great, but when it first loads the gradient does not fill up the whole screen initially. It vertically repeats the gradient like venetian blinds (different row heights across browsers) and then when the rest of the page loads it corrects itself. Unfortunately I can’t show you what is happening because the site is not live. It’s like I need a preloader or something. I tried a div that covers the page and then hides it with body onLoad, but that didn’t work. Any ideas?
Ming, did you get an answer to your venetian blind gradient problem? My cross-browser gradient works fine if I set it from topright to bottomleft, but on straight topto bottom, I get the blinds. And it doesn’t go away. Help?
Love it thank yOU@