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/Webkit support them at the moment. And Webkit has its own differing syntax.
Update: Apple have recently announced that future builds of Safari (and Chrome from v.10+) will support both syntaxes, so we can begin to drop the more complex Webkit versions. Hurrah, say I.
Linear gradients under Firefox (Gecko) 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)
The Safari/Chrome (Webkit) equivalents are a good deal trickier: background:-webkit-gradient(linear, left top, left bottom, color-stop(0.0, yellow), color-stop(0.5, orange), color-stop(1.0, red)), for example. Translated, this is a linear gradient from top to bottom, yellow-to-orange-to-red. Note that each colour stop must be specified, and that measurements are proportional only - you can't use pixels. Colours can be specified by any of the valid methods.
Radial gradients
In Firefox (Gecko), 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.
In Safari/Chrome (Webkit) we have a different syntax, where we specify the start X and Y of the gradient and its radius at that point, followed by the same values for the end of the gradient. These background positions are again only proportional - pixels aren't allowed.: background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 80, color-stop(0.0, #fff), color-stop(1.0, #888))
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.
Here is where the more complex Webkit syntax gets really confusing. Frankly, with the pink rose example I am struggling to get the two versions to look alike...
Multiple backgrounds