Apr 14
Cross-Browser CSS Gradient
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.
Going Lean with Website Production Brief History of Western Typography
Comments
Pages: 11 10 9 8 7 6 5 4 3 2 1 » Show All
There are 102 comments (+Add)
Pages: 11 10 9 8 7 6 5 4 3 2 1 » Show All
Loading ...
102 jeff
August 26th, 2010 at 11:21 am
Wow the CSS Gradient Dropdown Menu example is amazing. Too bad it’s hosed in IE 7- but absolutely amazing that you can achieve that w/out the use of images.
Great work!
101 D.A.J
August 23rd, 2010 at 9:01 am
Nice one. It is a really useful.
100 Adam Clark http://devil-named-adam.deviantart.com
August 19th, 2010 at 11:03 am
Is there a way to give a gradient to text (not a background gradient).
99 Andrew
August 19th, 2010 at 10:56 am
very helpful. clear and to the point, with no obfuscation. thank you!
98 Sławek http://www.wolnifarmerzy.com.pl
August 16th, 2010 at 6:28 pm
thanks, very usefull
97 Felix Nagel http://www.felixnagel.com
August 16th, 2010 at 4:14 am
Cross browser? Does not work in latest Opera and Chrome on Win.
96 Aaron S
August 15th, 2010 at 8:43 pm
When this filter is applied in IE, text smoothing is disabled (tested in IE8), which is not so nice for users with text smoothing enabled as it’s a very obvious difference in text rendering, the best option here may be to have a fallback background image for browsers other than Firefox, Chrome, and Safari. This would be done by specifying the background image as the background property as the fallback in the example above.
95 David http://www.dcholloway.co.uk
August 6th, 2010 at 4:32 am
Filter doesn’t seem to work in IE. What ever I change the hexadecimal value too it still renders blue.
94 Some Funky Dude
August 1st, 2010 at 9:27 pm
Very nice, thanks for sharing.
93 Jason Williams http://www.jaywdesigns.com
July 30th, 2010 at 2:20 pm
Thanks so much for these tips. It’s incredible that IE doesn’t support so many things when it comes to CSS. I hope soon they realize the importance of this. Why do they refuse to cooperate with things that other browsers support?