CSS Gradients Tutorial - Applying CSS3 Gradients

Gradients are yet another cool feature introduced in CSS3. However, since the standard isn't close to being ratified by the W3C, every browser has chosen to implement its own gradient property, so you will have to use vendor prefixes. As of this date (February 2011), the following browsers are known to support the -*-gradient property: Firefox 3.6+, Safari 4+, all versions of Chrome and Internet Explorer 5.5+. 

Here is a quick example of how to create a top-to-bottom gradient from red (#f00) to white (#fff), with implementations for all major browsers.

HTML Example:

Div with gradient
  

CSS Example:

#gradient {
color: #fff;
height: 50px;
padding: 20px;
/* For WebKit (Safari, Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#fff));
/* For Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #f00, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 and newer */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000, endColorstr=#FFFFFFFF)";
}  

Result:

Be advised that Internet Explorer asks for the full six-digit hex representation of a color (#FF0000 rather than #F00) but you can use the shortcode for the rest.