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 this dropdown menu (demo) I found while google-ing 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 will 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+ */ 

,  #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.