cssmatic gradient css generator,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:

#myDiv {

background: rgb(30, 50, 230);

background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);

background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);

background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);

background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);

background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);

}

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