CSS3 Gradient Generator

CSS3 Gradients Explained

The CSS3 gradient property is one of the most useful tools available to a web designer. It allows you to create stunning interfaces using gradients without the need for images. This means your web pages will be lighter which will speed up download times and can even improve SEO.

Each browser has their own prefix so the syntax can be quite complex. Here's an example:

The first thing we do is assign the element a background colour. This is in case the browser does not support CSS3 Gradients.

The next four lines are the variations for different browsers. At the time of writing the CSS3 specification has not been finalised so we use these different vendor prefixes as an interim measure. Modern browsers will support one of these rules and ignore the others.

The final line is the rule that the CSS3 specification currently defines, so we write this last in order to override the vendor prefixes when browsers start supporting it.

Because the syntax is so complicated it is best to use an online generator to avoid making mistakes.

Supported Browsers

At the time of writing the following browsers support CSS3 gradients: