CSS: Repeating Linear Gradient

What is repeating-linear-gradient

repeating-linear-gradient() function creates repeating stripes of color patterns.

Syntax

the syntax is the same as Linear Gradient, but the last color stop at the end should be less than 100%, else there is no room 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;
 border: solid 1px grey;
}

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);

 div {
  height: 4rem;
  margin: 0.5rem;
  border: solid 1px grey;
 }

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

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

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