HTML and CSS Reference
In-Depth Information
The angle for the gradient can be set by using the keyword
to
, followed by the
destination in which the gradient will end:
top
,
right
,
bottom
,
left
, or any combination
thereof. An example is shown in Figure
15-2
.
linear-gradient(to bottom right, gray, black);
Figure 15-2.
Bottom-right linear gradient
More-precise angles can be specified by using the
deg
unit, with 0
deg
being the
same as
to top
. The degrees proceed clockwise, and negative angles are allowed.
linear-gradient(0deg, gray, black); /* to top */
linear-gradient(90deg, gray, black); /* to right */
linear-gradient(180deg, gray, black); /* to bottom */
linear-gradient(-90deg, gray, black); /* to left */
Additional color stops can be added between the starting and ending colors. Any
color stop can be followed by a stop position specified as either a percentage or a length
value. If no stop position is specified, the colors are evenly distributed. In the following
case, white is set at 25 percent, instead of its default position of 50 percent. Figure
15-3
illustrates the result of this code.
linear-gradient(gray, white 25%, black);
Figure 15-3.
Gradient with multiple color stops
