CSS: Repeating Linear Gradient

What is repeating-linear-gradient

repeating-linear-gradient() function creates repeating Linear Gradient.

Syntax

the syntax is the same as

• CSS: Linear Gradient

the last color stop at the end should be less than 100%, else there is no room to repeat.

Basic example

.xbasic399 {
 background-image: repeating-linear-gradient(90deg, red 0%, white 20%);
 width: 100px;
 height: 100px;
}

Example. zebra strips

.xzebra74 {
 background-image: repeating-linear-gradient(45deg, black 0, black 15px, white 15px, white 30px);
 height: 50px;
}

Example. multiple

You can have multiple repeating-linear-gradient. The first one is at the top, latter ones are layed below the previous.

It's useful only if you have transparency in the gradient. The transparent spots are windows to show lower layers.

Syntax:

background-image: gradient1, gradient2, etc;

<div class="xzebra-all">
 <div class="xzebra-a"></div>
 <div class="xzebra-b"></div>
 <div class="xzebra-c"></div>
</div>

div.xzebra-all {
 --zb1: repeating-linear-gradient(45deg, black 0, black 15px, transparent 15px, transparent 30px);

 --zb2: repeating-linear-gradient(-45deg, black 0, black 15px, transparent 15px, transparent 30px);

 background-color: grey;

 div {
  height: 64px;
  margin: 8px;
 }

 .xzebra-a {
  background-image: var(--zb1);
 }

 .xzebra-b {
  background-image: var(--zb2);
 }

 .xzebra-c {
  background-image:
   var(--zb1),
   var(--zb2);
 }
}

rainbow strip

.Wv8wC {
 background-image: repeating-linear-gradient(
  to right,
  red 0px,
  orange 20px,
  yellow 40px,
  green 60px,
  blue 80px,
  indigo 100px,
  violet 120px,
  red 140px
 );
}

.Wv8wC {
 width: 280px;
 height: 280px;
}