The CSS3 gradient ability allows us to automatically create colour-gradient backgrounds for elements in a web page, without having to use image files.
Unfortunately this is not supported by Opera or Internet Explorer. There is a filter that you can use to create linear gradients in IE, but for Opera you will have to resort to a fallback background image.
Gradient Syntax
The gradient feature, rather than being a standalone property on its own, is a set of values that can be applied to the background, border-image and list-style-image properties. Each browser-specific extension has its own syntax, so for maximum support, here is what you need to create a vertical linear gradient:
.gradient {
color: #fff;
background: #aaa url(gradient_image.png) 0 0 x-repeat;
background-image: -moz-linear-gradient(top, #000, #aaa);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(1, #aaa);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr='#000000', EndColorStr='#aaaaaa')";
filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr='#000000', EndColorStr='#aaaaaa');
}
Gradient Tools
For some help creating gradients, there is a great tool called the Ultimate CSS Gradient Generator, which allows you to set up any gradient you wish, and then spits out the relevant CSS code for you.