A mini site by
Learn how to create effective CSS3 Gradients for use on your website. Whats more, if your browser doesnt support the gradient you can supply a handy fallback.
CSS Gradients are currently supported in the following browsers:
The background on this website uses CSS3 Gradients. The code below should be pretty self explanatory, but lets run through it anyway.
The first two css properties are your fallbacks. background-color and background-image. Its always sensible to have a default BG colour, and the first background-image will only load if the browser doesn't support the gradients.
The final 5 calls to background-image cover the various browsers that are supported (see above list for supported browsers), important things to note: the first colour reference is the "from colour" the second is the "to colour".
The way we've set this up is linear top to bottom. You could create a left to right gradient by replacing "top" with "left"
Lets face it, the typical usage for this is going to be to create linear background for your website!
Please note, this website is built using a variety of CSS3/CSS2 properties and as such might not display correctly in older web browsers (although it should degrade nicely).
We would always suggest keeping your web browser up to date where possible.
