CSS Function
repeating-linear-gradient()
The repeating-linear-gradient() function creates a repeating linear gradient pattern, tiling the color stops indefinitely.
Syntax
repeating-linear-gradient([angle | to side,] color-stop [, color-stop]+)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| angle | angle | No | Direction of the gradient line |
| color-stop | color [position] | Yes | Color and position defining one tile of the repeating pattern |
Examples
Diagonal stripes
10px blue diagonal stripes.
css
background: repeating-linear-gradient(
45deg,
#3b82f6 0px,
#3b82f6 10px,
transparent 10px,
transparent 20px
);Subtle lined paper
Horizontal ruled lines every 25px.
css
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 24px,
#e5e7eb 24px,
#e5e7eb 25px
);Browser Support
✓
Chrome
v26++
✓
Firefox
v16++
✓
Safari
v6.1++
✓
Edge
v12++
✓
Opera
v12.1++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
Use arbitrary values: bg-[repeating-linear-gradient(...)]Frequently Asked Questions
How does the repetition work?▼
The gradient tiles by repeating the color stops from the last stop position onward. Ensure the last stop has an explicit position for predictable tiling.
Can I control the stripe thickness?▼
Yes. The distance between color stops determines stripe width. For 10px stripes: red 0 10px, blue 10px 20px.
Explore CSS Color Tools
Try our free tools to work with repeating-linear-gradient() and other CSS color functions.
Open Tools