Cross-Browser CSS Gradient

Although the CSS gradient feature, introduced by Webkit has been around for a few years, it is still not fully support cross-browser. This post will show you how to create CSS gradients that are supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

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 (put it together)

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+ */