A linear gradient
Backgrounds
Frankly, the needs of many designs cause developers a good deal of pain. Complex backgrounds in particular can be a struggle to implement semantically, especially when we cannot know the dimensions of a container beforehand.
When we need gradients, we usually fall back on repeating images. Perhaps we combine this with Douglas Bowman's excellent 'Sliding Doors' technique to cope with the changing sizes of our elements. In either case, it's difficult, fiddly, hard to maintain and often requires extra non-semantic content on-page.
Although implementations haven't 'settled' yet, CSS3 promises easy answers to these issues:
Linear gradients
Gradient backgrounds come in two basic kinds - linear (spreading across the element from one side to another) and radial (spreading across the element outwards from a point inside it). The concept is easy enough - but unfortunately only Opera, Firefox and Safari/Chrome support them at the moment.
Linear gradients need at least two sets of properties, one per 'colour stop' on the gradient. A simple example might be background: -moz-linear-gradient(#fff, #888), which would produce a gradient with white at the top, fading gradually to dark grey at the bottom. Adding distance values shifts the fade, e.g. background: -moz-linear-gradient(#fff, #888 75%), which ensures the background becomes dark grey at 75% of the height of the element. In FF, measurements can be percentages, pixels or use any other unit, and colours can be specified in any valid manner, including RGBa notation.
Multiple colour stops are just a matter of adding in further properties - background: -moz-linear-gradient(#fff, #f00, #000) fades from white to red to black. The start point of the gradient can be shifted by specifying a background position value: background: -moz-linear-gradient(left, #fff, #888), and finally the angle of the fade by degree: background: -moz-linear-gradient(-45deg, #fff, #888)
Radial gradients
The simplest possible radial gradient might be: background:-moz-radial-gradient(#fff, #888). This would produce a gradient centered in the middle of the element, fading in an ellipse from white to dark grey. A more even, circular gradient would need a further property: background:-moz-radial-gradient(circle, #fff, #888). There are also a set of Size Constants available, which ensure that the gradient fits its element - they default to cover, which stretches the gradient across the element, but we can use contain to fit the radius within the element. So, a verbose example might be background:-moz-radial-gradient(circle contain, #fff, #888).
Furthermore, the default central spot for a gradient can be amended by using the standard background-position values - so background:-moz-radial-gradient(200px 200px, #fff, #888) would be 200px in and down from the top left corner.
A radial gradient
Multiple backgrounds
Another major advance in CSS3 is the capability to set multiple background properties. These can be multiple images, multiple gradients, or combinations of them. The multiple properties are comma-separated, but be careful - the order is important, because it represents the vertical 'stack' of the backgrounds with the first background stated at the top. Usually you'll need to state your image(s) first, then your gradient background(s).
Note that IE 9 supports multiple backgrounds, although unfortunately not gradients. IE10 supports both.
Multiple backgrounds