HTML and CSS Reference
In-Depth Information
Creating Linear Gradients
A linear gradient creates a smooth transition between two or more colors in a straight line. By default, the
gradient goes from the top of the element to the bottom, as shown in Figure
19-6
.
Figure 19-6.
A simple linear gradient between two colors
However, you can control the direction of the gradient using keywords to point to one of the sides or
corners, which then becomes the ending point. Alternatively, you can specify the angle at which the gradient
should be drawn.
To create a linear gradient, you use the
linear-gradient()
function, which takes the following comma-
separated arguments:
•
The angle or direction of the gradient (optional)
•
A comma-separated list of two or more color stops
The gradient in Figure
19-6
is created using the following style (the code is in linear_1.html):
div {
width: 300px;
height: 100px;
margin: 20px;
background-image: linear-gradient(#C24704, #FFEB79);
}
Just two color values are passed to the
linear-gradient()
function. The first one is a dark orange, and the
second one is a shade of yellow. Because no angle or direction is specified, the starting point of the gradient line
is the top edge, and the ending point is the bottom edge. Also, no positions are specified for the color stops, so the
first one is positioned at
0%
and the second one at
100%
.
Because a gradient has no intrinsic dimensions, the transition from one color to the next is more gradual
(see Figure
19-7
) when the height of the
<div>
is doubled in linear_2.html like this:
div {
width: 300px;
height:
200px;
margin: 20px;
background-image: linear-gradient(#C24704, #FFEB79);
}
Figure 19-7.
The change in height results in a more gradual color transition
