HTML and CSS Reference
In-Depth Information
FIGURE 4.12
A basic linear
gradient.
FIGURE 4.13
A linear gradient
direction can be varied via the
use of keywords or degree
values.
The most common place you'll want to use them is on standard, commonplace
backgrounds. Here is a simple syntax example:
background: linear-gradient(#ff0000,#007700);
Figure 4.12
shows the result, taken from an example file in the chapter4 code
download folder called linear-gradient-test.html. The two colors are the start color
in the gradient and the end color, and by default the gradient runs from the top to
the bottom of the container.
LINEAR GRADIENT DIRECTION
If you want to vary the direction of your gradient, you can add a direction value at
the start of the gradient, like this:
background: linear-gradient(to bottom right, #ff0000,#007700);
This direction value makes the gradient travel from the top left to the bottom
right (
Figure 4.13
).
As you'd expect, you can use a whole range of logical keywords for gradient
direction:
to top
,
to top right
,
to right
,
to bottom right
,
to bottom
,
to bottom
left
,
to left
,
to top left
.
