The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

122 Chapter 11

WArninG Graphical effects like gradients can be quite computationally taxing and will slow the

rendering and performance of pages, especially in mobile browsers. That’s not to say

you should avoid them, just that you should always evaluate performance against

appearance when building your sites.

gradienTS

A linear gradient is one that gradually transitions between colors over the

length of a straight line connecting two points. At its simplest, a linear gra-

dient changes proportionally between two colors along the full length of

the line.

I’ll begin by showing the shortest possible syntax for a linear gradi-

ent, which is defined using the linear-gradient() value function on the

background-image property:

E { background-image: linear-gradient(black, white); }

Figure 11-1 shows the result.

Figure 11-1: A simple top-bottom, two-color linear gradient

Each color that you want the gradient to pass through is known as a color-

stop and is passed into the function in a comma-separated list of arguments.

As you can see here, gradients require at least two color-stops: a start and

an end. In this example, the gradient begins black and ends white, passing

gradually through all the intermediate shades between the two values.

Setting Gradient Direction

The axis between the first and last color-stops is known as the gradient line.

In the previous example, the gradient line begins at the top of the box and

moves to the bottom, vertically. This is the default direction. To set a differ-

ent gradient line, specify a target side or corner of the box by passing a new

argument into the function before the list of color-stops. The argument is a

string of keywords, beginning with to and followed by one or two direction

keywords. For example, to define a black-to-white gradient running bottom

to top, you use this value:

E { background-image: linear-gradient(to top, black, white); }