repeating-radial-gradient()
The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient(). The function's result is an object of the <gradient> data type, which is a special kind of <image>.
Safe to Use
repeating-radial-gradient() is considered safe to use.
It’s supported by 94% of global browsers.
Browsers
Version Breakdown
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Full Support
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Implemented with the vendor prefix: -webkit-
Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Full Support
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Implemented with the vendor prefix: -webkit-
Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Full Support
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Implemented with the vendor prefix: -webkit-
Implemented with the vendor prefix: -o-
Full Support
Implemented with the vendor prefix: -webkit-
Implemented with the vendor prefix: -o-
Full Support
Implemented with the vendor prefix: -webkit-
Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
Full Support
Implemented with the vendor prefix: -webkit-
Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Implemented with the vendor prefix: -webkit-
See Also
- Using CSS gradients
- Other gradient functions:
radial-gradient(),linear-gradient(),repeating-linear-gradient(),conic-gradient(),repeating-conic-gradient() <image>image()element()image-set()cross-fade()