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
Search WWH ::

Custom Search