HTML and CSS Reference
Using Keywords to Set the Direction of the Gradient Line
The linear-gradient() function supports the following keywords to set the ending point of the gradient
line: top , bottom , right , and left . On their own, they represent the side of the gradient box; but they can also
be combined to indicate a corner, such as top left or bottom right . To set the direction, you precede the
keyword(s) with to . For example, linear_3.html draws the gradient from the bottom-right to the top-left of the
gradient box like this (see Figure 19-8 ):
background-image: linear-gradient( to top left, #C24704, #FFEB79);
Figure 19-8. The gradient is drawn from the diagonally opposite corner
■ At the time of this writing, WebKit-based browsers use the keywords on their own (without to ) to
specify the origin of the gradient line rather than its destination. For example, to draw the gradient line from left to
right, - webkit-linear-function() uses left instead of to right .
When the gradient line is drawn to a corner, a color stop at 50% automatically intersects the other corners.
For example, the gradient in linear_4.html is defined like this:
background-image: linear-gradient(to top left, #C24704, #FFEB79, #00ADA7);
The positions of the color stops aren't specified, so they default to 0% , 50% , and 100% , respectively. As a result,
the gradient line is drawn from the bottom-right to the top-left corner, and the second color stop intersects the
bottom-left and top-right corners, as shown in Figure 19-9 .
Figure 19-9. The color stop at 50% intersects the other corners
At the time of this writing, Chrome 21 and Safari 6 fail to draw gradients correctly when you use two
keywords to point to a corner, producing instead the result shown in Figure 19-10 .
Figure 19-10. Safari 6 gets the gradient direction wrong when using two keywords to point to a corner