CSS function repeating-linear-gradient()

Repeats a linear gradient.
It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

Example

Zebra stripes

body { background-image: repeating-linear-gradient( -45deg, transparent, transparent 20px, black 20px, black 40px ); /* with multiple color stop lengths */ background-image: repeating-linear-gradient( -45deg, transparent 0 20px, black 20px 40px ); }

Ten repeating horizontal bars

body { background-image: repeating-linear-gradient( to bottom, rgb(26 198 204), rgb(26 198 204) 7%, rgb(100 100 100) 10% ); }

Interpolation in rectangular color space

body { background: repeating-linear-gradient(90deg in oklab, blue, red 100px); }

Interpolating with hue

.shorter { background: repeating-linear-gradient( 90deg in hsl shorter hue, red, blue 300px ); }

.longer { background: repeating-linear-gradient( 90deg in hsl longer hue, red, blue 300px ); }