rs79.vrx.palo-alto.ca.us
CSS Gradients
CSS Gradients

With CSS3 four new gradient commands are supported:


    linear-gradient
    radial-gradient
    repeating-linear-gradient
    repeating-radial-gradient
A brief history: Webkit announced support in 2008 for gradients. In September 2009 the W3C finalized the gradient spec with a different syntax than WebKit. Mozilla accounced gradient support in November 2009 with the W3C syntax.

Webkit announced suppport of the W3C version of the commands as well as support for the old version in 2011; Apple has a Tutorial from 2012; Opera published on this in 2011 and updated it when the spec changed in 2012.

The spec having been finalized, browser prefixes are no longer needed. But as of 2013 there are so many of them out there still and it's good to know how to convert between these different standards if you want to reuse legacy code.

Keep in mind browser support for prefixed versions was spotty at best: no version of Opera ever worked with -o-repeating-radial-gradient or -o-repeating-linear gradient. -moz- worked for the most simple of radial gradients but none others and webkit is most supported prefix with Opera both new and old supporting it, Chrome, Safari etc. Yet the same command in webkit does something different when using a modern up to date according to the spec. browser. It's a little messy.

Again, all browsers now support the unprefixed gradient commands and you should us them. This documentation is really for how to deal with legacy prefixed code and what it all meant.

Specifiying the angle of a gradient

ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...

Specifying color and transparency in a gradient

ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...

Specifiying the direction of a gradient

ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...


Introduction to the radial-gradient command
ABCabc...
ABCabc...
ABCabc...

Repeating gradients

ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...


Introduction to the linear-gradient command.
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...

Specifying additional color stops in a a gradient

ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...

tests
tests linear -  Linear gradient tests

Browser compatibility tests.

Diagnostic page of all gradient features with the major browser prefixes: -o -ms -moz -webkit

Tags: #angle #color #direction #radial #repeat #simple #stops #tests