HTML and CSS Reference
In-Depth Information
Repeating gradients
Linear and radial gradients do not allow gradient patterns to repeat because they
naturally stretch to fill the element on which they are defined. Two additional functions
are used for creating repeating gradients:
repeating-linear-gradient()
and
repeating-radial-gradient()
.
For the purpose of repeating a linear gradient, the
repeating-linear-gradient()
function is used. The arguments for this function are the same as for
linear-gradient()
.
repeating-linear-gradient([<angle> | to <side-or-corner>]
{, <color stop> [stop position]} (2-∞) )
A repeating linear gradient repeats the color stops infinitely. The size of the gradient
is determined by the final color stop. To avoid sharp transitions, the starting color in
Figure
15-10
is repeated at the end.
repeating-linear-gradient(-45deg, white 0, black 10%, white 20%);
Figure 15-10.
Repeating linear gradient
The repeating function for the radial gradient also shares the same syntax as the
nonrepeating version. The example shown in Figure
15-11
illustrates the repeating function.
Note that this gradient has sharp color transitions in contrast with the previous example.
repeating-radial-gradient(black, black 5%, white 5%, white 10%)
Figure 15-11.
Repeating radial gradient