HTML and CSS Reference
In-Depth Information
figure 8-20
A vertical color gradient of three colors
background: linear-gradient(red,
yellow, blue)
Gradients are treated like images and thus are used with any CSS style that accepts
images, such as the
background
,
background-image
, and
list-style-image
properties.
The gradient applied to the object in Figure 8-20 is created using the
background
style.
To change the direction of a gradient, you can add a
position
or
angle
parameter to
the
linear-gradient()
function as follows
For browsers that support
multiple background
images, you can create
interesting visual effects
by using semi-transparent
colors to overlay several
gradients or to overlay
gradients with back-
ground images.
linear-gradient(
position
||
angle
,
color1
,
color2
, …)
where
position
defines the starting point of the first color, and
angle
is the direction
in which the gradient is pointed. The starting point is expressed using the keywords
top
,
bottom
,
left
, and
right
. If no position is given, the gradient is assumed to start from
the top of the object and proceed vertically downward. Thus, the following function cre-
ates a gradient that starts from the top-left corner of the object and transitions from blue
into white as it proceeds down to the bottom-right corner:
linear-gradient(top left, blue, white)
The other option is to define the angle of the gradient. Angles are laid out in a counter-
clockwise direction with an angle of 0° equating to a gradient that moves horizontally
across the object from the left to the right, a 90° angle representing a gradient that moves
vertically up from the bottom to the top, 180° moving horizontally from the right to the
left, and finally 270° for a gradient that moves vertically down from the top to the bottom
(see Figure 8-21).
figure 8-21
Gradient directions expressed as angles
90°
180°
0°
270°
