CoverT 24: repeating-linear-gradient

CSS

Mar 2, 2020

code

The repeating-linear-gradient() function creates an image consisting of repeating linear gradients. It takes the exact same arguments as the more common linear-gradient(), but it repeats the color stops infinitely in all directions to cover its entire container.

Code

<div class="box"></div>

.box {
  height: 300px;
  width: 300px;

  background-image: repeating-linear-gradient(
    red 0, 10px,
    yellow 10px, 20px,
    green 20px, 30px,
    blue 30px, 40px,
    indigo 40px, 50px,
    purple 50px,
    purple 60px
  );
}

Code

Results