CSS3: GRADIENTS

background-image

CSS3 is going to introduce the ability to specify a gradient for the background of a box. The gradient is created using the background-image property and, at the time of writing, different browsers required a different syntax.

Since it is not supported by all browsers, it is possible to specify a background image for the box first (which would represent the gradient) and then provide the CSS alternatives for browsers that support gradients.

On this page, we are focusing on linear gradients. You can see that in order to create a linear gradient, we need to specify two colors (that the gradient is between).

Some browsers allow you to specify the angle of the gradient, or even different types of gradients (such as radial gradients), but support is not as widespread as that for linear gradients.