11
Gradients
In this chapter, the last of the quartet about
decorative properties, I cover CSS gradients.
A gradient in this context is the gradual tran-
sition between two or more colors—a designstandard for many years and one that you might think
would be fairly simple to translate into CSS, but which
has a long and tortured history on the Web.
CSS gradients were first introduced in WebKit in 2008 and made their
way into Safari 4. The syntax they used, however, was completely different
from the one you’ll see in the rest of this chapter and was deemed too com-
plex by other browser vendors. Various other proposals were put forward
(and even implemented) throughout the following years, until a final syn-
tax was agreed on at the end of 2011. This final syntax was rapidly adopted
by all browsers, and it’s the one I’ll cover in this chapter. (Read “Browser
Support and Legacy Syntaxes” on page 131 to learn how to support older
versions in legacy browsers.)
PX3024