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