The most recent of modern browsers (Firefox from version 3.6, Safari version 4, Chrome, Opera 10) also support gradients in CSS. Gradients are (as of this writing) still in the proposal stage in CSS3, so each browser has its own proprietary prefix to the property: -moz- for Firefox, -webkit- for Safari and Chrome, and -o- for Opera. Both radial and linear gradients are possible: we’ll just look at linear gradients in this example.

1. body { background: -moz-linear-gradient(top, #a00, black); }

Simple linear gradients take just three values: starting position, starting color and ending color. The latter color values may be specified as keywords, hexadecimals, rgb, rgba, or hsl values.

Angled gradients are also possible:

1. body { background: -moz-linear-gradient(top 45deg, #a00, black); }

(The angle values are drawn from the implied current direction of the gradient, moving clockwise).

By default, colours are equally distributed along the gradient – in this case, red at the starting position (0%), black at the end (100%). If we add intermediary colours, they will be evenly distributed. If we want to add stops – for example, to have black start from the ⅓^rd point, do the following:

1. body { background: -moz-linear-gradient(top, #a00, black 33%); }

You can add as many colors as you wish into this gradient, each with their own individual stops – in fact, you could copy them directly from PhotoShop’s gradient tool.

If you desire to support older browsers, then you could use a repeating background image of a gradient bitmap to get the same effect. Doing so would gain broader browser compatibility for your design, but far lower flexibility to change and edit the gradient.