CSS3 Gradient Generator

Creating CSS3 gradients by hand is hard, but this simple CSS3 gradient generator makes life easy.

Your browser does not support the CSS3 gradient property. You can still use this tool to generate the CSS3 rule, but you won' be able to see the results.
|
deg
%
r
g
b
%
r
g
b

Generated CSS:

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:

Browser Supports CSS3 Gradients?
Firefox 3.6+ Full Support
Firefox 1-3 No
Safari 4+ Full Support
Safari 1-3 No
Chrome 1+ Full Support
IE10 Full Support
Opera 11.1+ Full Support