
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.