HTML and CSS Reference
FIGURE 4.18 A simple repeating
REPEATING LINEAR GRADIENTS
Repeating linear gradients have a similar syntax to linear gradients. Look at the
following example and the result in Figure 4.18 :
background: repeating-linear-gradient(to top right, rgba(0,0,0,0.4)
p 10px ,rgba(0,0,0,0) 20px, rgba(0,0,0,0.4) 30px);
Only 30 pixels' worth of gradient has been specified, but it is repeated over and
over again until the end of the container is reached.
The linear gradient syntax was updated at the time of this writing—the
keywords used to not include the to keyword, and mean the opposite direc-
tion. For example, to right used to be left . All browsers supported this at
the time of publication, but you might come across an older browser that
doesn't support the new syntax at some point.