HTML and CSS Reference
In-Depth Information
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
.
Caution
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
