x ai css repeating-linear-gradient 2026-06-06

2026-06-05

xtodo

ai generated

2. Simple Examples

Horizontal Stripes (Default Direction)

.striped {
  background-image: repeating-linear-gradient(
    #ff0000 0px,
    #ff0000 20px,
    #00ff00 20px,
    #00ff00 40px
  );
  height: 200px;
}

Shorter version (colors repeat automatically):

.striped {
  background-image: repeating-linear-gradient(#ff0000, #00ff00 40px);
}

The distance between the first and last stop defines the repeat unit (here 40px).

Vertical Stripes

.vertical {
  background-image: repeating-linear-gradient(
    to right,
    #000 0px,
    #000 10px,
    #fff 10px,
    #fff 20px
  );
}

Diagonal Stripes (45°)

.diagonal {
  background-image: repeating-linear-gradient(
    45deg,
    #4a90e2,
    #4a90e2 10px,
    #fff 10px,
    #fff 20px
  );
}

3. Direction Options

Direction	Keyword	Angle
Top to bottom	`to bottom` (default)	`180deg`
Left to right	`to right`	`90deg`
Diagonal	`45deg`	`45deg`
Opposite diagonal	`135deg`	`135deg`
From top-left	`to bottom right`	—
Custom angle	`30deg`	—

Tip: Use deg for precision, or keywords for readability.

4. Color Stops – Hard & Soft Transitions

/* Hard edges (stripes) */
repeating-linear-gradient(#333 0px, #333 50px, #eee 50px, #eee 100px)

/* Soft transitions */
repeating-linear-gradient(#333 0px, #eee 30px)

You can mix percentages and lengths:

repeating-linear-gradient(
  60deg,
  red 0%,
  yellow 20%,
  green 40%,
  blue 60%
)

5. Advanced Examples

Subtle Pin-Stripe Pattern

.pinstripe {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.1) 0px,
    rgba(0,0,0,0.1) 2px,
    transparent 2px,
    transparent 10px
  );
}

Multi-Color Rainbow Stripes

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

Checkerboard Effect (combine with another gradient)

.checker {
  background-image:
    repeating-linear-gradient(45deg, #000 0, #000 25px, transparent 25px, transparent 50px),
    repeating-linear-gradient(-45deg, #000 0, #000 25px, transparent 25px, transparent 50px);
}

Animated Stripes (Moving Marquee)

.marquee {
  background-image: repeating-linear-gradient(90deg, #f00, #0f0 30px);
  background-size: 300% 100%; /* important for animation */
  animation: slide 4s linear infinite;
}

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

6. `background-size` Matters!

When you use repeating-linear-gradient, the repeat unit is defined by your color stops. You can further control the overall pattern with background-size:

/* Make stripes wider */
background-image: repeating-linear-gradient(#000, #000 10px, #fff 10px, #fff 20px);
background-size: 100% 60px;   /* stretches the repeat vertically */

7. Common Use Cases

UI Patterns: Subtle stripes for progress bars, cards, or data tables
Code Editors / Terminals: Line highlighting
Performance: Much lighter than background images
Borders & Accents: Combine with background-position and multiple gradients

8. Browser Support

✅ Excellent support in all modern browsers (Chrome, Firefox, Safari, Edge)
IE10+ with -ms- prefix (rarely needed today)
Always test with background-color as fallback:

background-color: #ddd;
background-image: repeating-linear-gradient(...);

9. Pro Tips & Gotchas

Performance — Repeating gradients are very fast to render.
Transparency — Use rgba() or transparent for layered effects.
Multiple Gradients — You can stack several repeating-linear-gradient() separated by commas.
Units — Mix px and % freely. Percentages are relative to the gradient line.
Debugging — Temporarily remove repeating- to see one cycle of the gradient.

Full Demo HTML

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui; }
  .demo {
    height: 150px;
    margin: 20px;
    border: 2px solid #000;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
  }
</style>
</head>
<body>

<div class="demo" style="background-image: repeating-linear-gradient(45deg, #e91e63, #e91e63 20px, #2196f3 20px, #2196f3 40px);">
  Diagonal Stripes
</div>

</body>
</html>

Copy, paste, and experiment!

Next Steps: Try combining repeating-linear-gradient with repeating-radial-gradient or conic-gradient for even more creative backgrounds.