CSS Gradient Generator

CSS Repeating Gradients

What is a Repeating Gradient?

The repeating-linear-gradient() and the repeating-radial-gradient() create gradients consisting of repeating linear or radial gradients.
They are similar to the linear-gradient() and radial-gradient() and they take the same arguments, but instead of producing only a single gradient, they repeat the color stops in all directions so as to cover the entire container to which they are applied.


Syntax

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

Example

background: repeating-linear-gradient(#7A7FBA, #11C37C 25%);

Result



More examples

background: repeating-linear-gradient(45deg, #2C3E50, #2C3E50 10px, #34495E 10px, #34495E 20px);

Syntax

background: repeating-radial-gradient(shape-position, start-color, ..., end-color);

Example

background: repeating-radial-gradient(#7A7FBA, #11C37C 50%);

Result

background: repeating-radial-gradient(circle, #FFFFFF, #FFFFFF 10px, #E0E0E0 10px, #E0E0E0 20px);

Common uses

• Striped backgrounds and patterns
• Progress bar / skeleton-loading textures
• Decorative borders
• Simple geometric textures without images

Browser compatibility

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Opera Mini	Android Browser	Chrome Android
10+	12+	3.6+	10+	5.1+	11.6+	5+	x	4.4+	151+

You can read more information about browser compatibility here. For maximum cross-browser compatibility and coverage, it's important that you use CSS prefixes. You can use this tool to append CSS prefixes to your CSS code.


FAQ

How is a repeating gradient different from a regular one?

A regular gradient blends once across the element; a repeating gradient repeats the same color-stop sequence over and over to fill the whole element, like a tile.

How do I control the stripe width?

The gap between two color-stop positions sets the width of that stripe — e.g. #2C3E50 0px, #2C3E50 10px makes a 10px-wide stripe of that color.

Try the CSS Gradient Generator →