repeating-linear-gradient() | Mdn css gradient
Therepeating-linear-gradient()CSS[1]function[2]createsanimageconsistingofrepeatinglineargradients.Itissimilartolinear-gradient()[3]andtakesthesamearguments,butitrepeatsthecolorstopsinfinitelyinalldirectionssoastocoveritsentirecontainer.Thefunctionsresultisanobjectofthe
The repeating-linear-gradient() CSS[1] function[2] creates an image consisting of repeating linear gradients. It is similar to linear-gradient()[3] and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The functions result is an object of the <gradient>[4] data type, which is a special kind of <image>[5].
The length of the gradient that repeats is the distance between the first and last color stop. If the first color does not have a color-stop-length, the color-stop-length defaults to 0. With each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition. This can be altered with repeating the first color again as the last color.
As with any gradient, a repeating linea...