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

Gradients 125

along the gradient line where a color-stop is positioned. For example, this

code positions the white color-stop at 75 percent of the length of the gradi-

ent line:

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

Figure 11-4 shows the result. Compare it to Figure 11-3 where no posi-

tion is defined, and you’ll see that the white color-stop has moved further

along the gradient line toward the bottom of the element.

Figure 11-4: The second color-stop occurs three-quarters (or 75 percent) of the way down

the length of the gradient.

You’re not limited to using only percentage values on color-stops; length

values are also permitted. This next snippet shows three ways to use length

and percentage values, with the result shown in Figure 11-5. I’ll walk through

each after the code.

 div { background-image: linear-gradient(to right, black, white 75%); }
 div { background-image: linear-gradient(to right, black 50%, white); }
 div { background-image: linear-gradient(to right, black, white 50%, black 1px); }

Figure 11-5: Using different position values in the color-stops

In , the final color-stop argument has a position of 75 percent so the

color-stop begins there and continues as a solid color until the end. In ,

the first color-stop has the position value, so a solid block of the inherited

color (black) is displayed until the 50 percent mark of the gradient line, at

which point the gradient begins to transition to the final color-stop value.

Finally,  has three color-stops. The second begins at 50 percent, so the

first and second color-stops transition up to that point. The final color-stop

is placed just one pixel farther along the gradient line, so there is a sudden

shift to that color (with no transition) and the color continues to the end.