Gradients 123
To change the same gradient to run diagonally from the top-left corner
to the bottom-right one, you use two directional keywords:
E { background-image: linear-gradient(to right bottom, black, white); }
For finer control over the direction of the gradient line, you can use
an angle argument instead of the directional keywords. Angles can be
declared using various units—in this chapter, I’ll stick with degrees (deg)
because they’re the most commonly understood, but see “Angle Units” on
page 124 for more about alternative units.
The angle value sets the angle of the gradient line: 0deg (or 360deg) goes
from bottom to top, 45deg from bottom left to top right, 90deg from left to
right, and so on. Negative values make the gradient go counterclockwise:
- 45deg is the same as 315deg, -315deg is the same as 45deg, and so on. You get
the idea.
For example, to create the same top-left to bottom-right gradient as
in the previous code example, but using an angle value, you would use
this code:
E { background-image: linear-gradient(135deg, black, white); }
The next code snippet shows three examples of the effects of different
direction values: the first from right to left, the second from bottom left to
top right, and the last an angle of 120 degrees (roughly, but not quite, top
left to bottom right).
E { background-image: linear-gradient(to left, black, white); }
E { background-image: linear-gradient(to top right, black, white); }
E { background-image: linear-gradient(120deg, black, white); }
Figure 11-2 shows the results.
Figure 11-2: Three different direction values: left to right, bottom left to top right, and
120 d e gre es
Adding Extra Color-Stop Values
So far I’ve used a simple gradient with only two color-stops, but you can use
more. (Because this book is printed in black and white, I’m limited by the
palette that I can choose!) Each color you add is declared by simply adding
a new color-stop in the comma-separated list, as in this example where I
add a third black color-stop:
E { background-image: linear-gradient(black, white, black); }
