🔁 CSS repeating-linear-gradient() — Complete Tutorial

🌐 What Is repeating-linear-gradient()?

The repeating-linear-gradient() function creates a repeating pattern of gradients along a straight line. Instead of blending colors just once (like linear-gradient()), it repeats the gradient pattern infinitely in the specified direction.

>>“Use repeating-linear-gradient() to create patterns like stripes, grids, ruled paper, barcodes, and more — all without images.”

Note

✔ Perfect for backgrounds
✔ Repeats the pattern automatically
✔ Small patterns create powerful visual textures

📦 Syntax

Basic Syntax

repeating-linear-gradient(direction, color-stop1, color-stop2, ...);

Works exactly like linear-gradient(), but the color stops repeat indefinitely.

📌 1. Basic Repeating Stripes

Simple stripes

background: repeating-linear-gradient(
  to right,
  black 0,
  black 10px,
  yellow 10px,
  yellow 20px
);

Creates a black–yellow repeating stripe pattern horizontally.

📌 2. Vertical Stripes

Vertical stripes

background: repeating-linear-gradient(
  to bottom,
  red 0,
  red 15px,
  white 15px,
  white 25px
);

Produces vertical stripes (top → bottom).

📌 3. Diagonal Stripes

Diagonal pattern

background: repeating-linear-gradient(
  45deg,
  #4a90e2 0,
  #4a90e2 10px,
  white 10px,
  white 20px
);

Angled patterns like candy stripes or caution tape.

📌 4. Creating a Barcode-Like Pattern

Barcode pattern

background: repeating-linear-gradient(
  to right,
  black 0,
  black 2px,
  white 2px,
  white 5px
);

A mix of thin and thick stripes like a barcode.

📌 5. Ruled Notebook Paper Background

Notebook paper

background: repeating-linear-gradient(
  to bottom,
  #d0e7ff 0,
  #d0e7ff 1px,
  transparent 1px,
  transparent 24px
);

Simulates blue ruled paper lines.

📌 6. Checkerboard Illusion (Diagonal Repetition)

Checker illusion

background: repeating-linear-gradient(
  45deg,
  #000 0,
  #000 10px,
  #fff 10px,
  #fff 20px
);

Repeating diagonals can create grid-like textures.

📌 7. Subtle Background Textures

Subtle texture

background: repeating-linear-gradient(
  to bottom,
  rgba(0,0,0,0.03) 0,
  rgba(0,0,0,0.03) 1px,
  transparent 1px,
  transparent 3px
);

Very faint lines create a premium print-like texture.

📌 8. Rainbow Repeating Gradient

Rainbow bars

background: repeating-linear-gradient(
  to right,
  red 0,
  orange 20px,
  yellow 40px,
  green 60px,
  blue 80px,
  purple 100px
);

Creates repeating rainbow color bars.

📌 9. Decorative Borders Using Repeating Gradients

Gradient border

.border {
  border: 10px solid transparent;
  background: 
    repeating-linear-gradient(
      45deg,
      #000 0,
      #000 5px,
      #fff 5px,
      #fff 10px
    ) border-box;
}

Produces striped borders without images.

📌 10. Animated Repeating Linear Gradient

Animated stripes

.animate {
  background: repeating-linear-gradient(
    90deg,
    #333 0,
    #333 10px,
    #555 10px,
    #555 20px
  );
  background-size: 200% 100%;
  animation: move 2s linear infinite;
}

@keyframes move {
  0% { background-position: 0 0; }
  100% { background-position: -100% 0; }
}

Creates moving conveyor-belt style stripes.

🧪 Real-World Examples

1️⃣ Skeleton Loading UI

Skeleton pattern

.skeleton {
  background: repeating-linear-gradient(
    -45deg,
    #eee 0px,
    #eee 10px,
    #ddd 10px,
    #ddd 20px
  );
}

2️⃣ Striped Warning Banner

Caution stripes

.warning {
  background: repeating-linear-gradient(
    45deg,
    yellow 0,
    yellow 15px,
    black 15px,
    black 30px
  );
}

3️⃣ Graph Paper Grid

Graph grid

background:
  repeating-linear-gradient(
    to right,
    #ccc 0,
    #ccc 1px,
    transparent 1px,
    transparent 20px
  ),
  repeating-linear-gradient(
    to bottom,
    #ccc 0,
    #ccc 1px,
    transparent 1px,
    transparent 20px
  );

⚠️ Common Mistakes

  • ❌ Forgetting to define stop lengths → unpredictable patterns
  • ❌ Using large gaps → creates huge repeated sections
  • ❌ Expecting blending — repeating gradients do not fade; they tile
  • ❌ Using too many stops → complex patterns become heavy

Note

Always define your stops clearly (e.g., 0, 10px, 20px) to control the repetition size.

🔥 Summary

repeating-linear-gradient() is incredibly powerful for generating patterns, textures, and design elements — all with pure CSS. From stripes to overlays to animated backgrounds, this tool removes the need for external images and keeps designs scalable & light.

>>“Repeating gradients unlock endless pattern possibilities — with just a few lines of CSS.”

Learn more →MDN Docs 📘