CSS repeating-radial-gradient() Function
Example
div {
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}Meaning
The repeating-radial-gradient() css function creates repeat radial gradients.
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().
With each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last color stop and the first). Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition, which can be mitigated by repeating the first color as the last color.
Version: CSS3
Standard Syntax
repeating-radial-gradient(shape size at position, startColor, ..., lastColor)Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Function Arguments
The following table describes the arguments of this function.
| Argument | Description |
|---|---|
| shape | Defines the shape of the gradient.
Possible values:
|
| size | Defines the size of the gradient.
Possible values:
|
| position | Default value is center. Defines the position of the gradient. |
| startColor, ..., lastColor | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |