CSS Gradient Generator

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%);

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%);

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

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.