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

Custom Search