HTML and CSS Reference
In-Depth Information
For example, the following function creates a gradient that moves diagonally across
the object at a 45° angle starting from the bottom-left corner and moving toward the top-
right corner:
linear-gradient(45deg, blue, white)
Angles also can be expressed using negative values, in which case the angles are laid
out in a clockwise direction. If no angle is specified, the browser determines the gradient
direction based on the location of the starting position. Figure 8-22 shows examples of
different gradients you can create using the
linear-gradient()
function.
figure 8-22
color gradients from different starting positions and angles
background:
linear-gradient(
left
, red,
yellow, blue)
background:
linear-gradient(
bottom right
,
red, yellow, blue)
background:
linear-gradient(
65deg
, red,
yellow, blue)
By default, the colors from the color list are evenly distributed across the gradient. You
can specify the location of each color by adding
color stops
to the
linear-gradient()
function using the syntax
linear-gradient(
position
||
angle
,
color-stop
,
color-stop
, …)
where
color-stop
specifies the color and distance of the color from the starting posi-
tion. For example, the function
linear-gradient(orange, yellow 50px, green 100px)
starts the gradient with orange, places yellow 50 pixels down from the top of the object,
and finally places green 100 pixels down from the top. Anything more than 100 pixels
away from the starting orange color will be displayed in the same shade of green.
Color stops also can be specified as percentages of the width of the color gradient
space, as illustrated in the function
linear-gradient(left, orange 30%, yellow 40%, green 50%)
which starts the color orange at 30% of the object's width, yellow at 40%, and green
at 50%. Before the 30% point, the background is a solid orange; and beyond the 50%
point, the background is solid green. Figure 8-23 shows an example of a color gradient
using multiple color stops to create a banded effect.
