CSS

🎯 What is repeating-linear-gradient()?

repeating-linear-gradient() creates a linear gradient that automatically repeats itself at specific intervals.

When one gradient section ends, the same pattern starts again.

🧩 Simple Definition

CSS

repeating-linear-gradient() = creates a repeating linear gradient pattern

🧩 Basic Syntax

CSS


background: repeating-linear-gradient(
  direction,
  color1,
  color2,
  ...
);

🧠 Parameters

1. Direction

Defines the direction of the gradient.

Common Values

Value	Direction
to right	Left → Right
to left	Right → Left
to bottom	Top → Bottom
to top	Bottom → Top
45deg	Diagonal gradient
90deg	Vertical angle

2. Colors and Stops

Each color can have a length value that determines:

where the color starts
where it ends
how often the pattern repeats

Example:

CSS


red 0px,
yellow 20px

👉 This means the color transition lasts for 20 pixels.

🧩 Basic Examples

1. Simple Horizontal Stripes

CSS


background: repeating-linear-gradient(
  to right,
  red,
  yellow 20px,
  red 40px
);

🧠 Result

red and yellow stripes repeat continuously
the pattern repeats every 40 pixels

🔹 2. Diagonal Repeating Gradient

CSS


background: repeating-linear-gradient(
  45deg,
  blue,
  lightblue 15px,
  blue 30px
);

🧠 Result

Creates diagonal blue stripes repeating every 30 pixels.

🔹 3. Thin Line Pattern

CSS


background: repeating-linear-gradient(
  to bottom,
  #ddd,
  #ddd 1px,
  white 1px,
  white 20px
);

🧠 Result

Creates notebook-style horizontal lines.

🎨 Practical Example

Stylish Striped Background

CSS


body {

  background: repeating-linear-gradient(
    45deg,
    #222,
    #222 10px,
    #333 10px,
    #333 20px
  );

}

👉 Creates a modern diagonal stripe effect.

⚙️ How Repetition Works

The gradient repeats based on the final stop position.

Example:

CSS


red 20px,
blue 40px

👉 The full pattern size becomes 40px.

After 40px, the same gradient repeats again.

⚠️ Difference Between linear-gradient() and repeating-linear-gradient()

Property	Behavior
linear-gradient()	Gradient appears only once
repeating-linear-gradient()	Gradient pattern repeats infinitely

🧩 Combining with Other Background Properties

repeating-linear-gradient() can be combined with:

Property	Purpose
background-size	Controls pattern size
background-position	Controls placement
background-blend-mode	Adds visual effects

🧠 Common Use Cases

This function is commonly used for:

striped backgrounds
grid designs
line textures
decorative UI elements
warning patterns
modern abstract designs

🎨 Example: Warning Stripe Pattern

CSS


background: repeating-linear-gradient(
  45deg,
  yellow,
  yellow 20px,
  black 20px,
  black 40px
);

👉 Creates a caution-style striped pattern.

⚠️ Important Note

Because gradients are generated directly by CSS:

✅ no image file is required
✅ gradients scale automatically
✅ they are lightweight and responsive

This improves website performance.

CSS Linear Gradient

CSS Radial Gradient