HTML and CSS Reference
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