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
Syntax
background: repeating-radial-gradient(shape-position, start-color, ..., end-color);
Example
background: repeating-linear-gradient(#7A7FBA, #11C37C 50%);
Result
Browser compatibility
| IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Chrome Android |
|---|---|---|---|---|---|---|---|---|---|
| 10+ | 12+ | 3.6+ | 10+ | 5.1+ | 11.5+ | 5+ | x | 4+ | 98+ |
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.
CSS Gradients Generator
You can easily generate your own gradients with the online css gradient generator.