CSS repeating-radial-gradient() Function
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
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.
repeating-radial-gradient(shape size at position, startColor, ..., lastColor)
The numbers in the table specify the first browser version that fully supports the property.
The following table describes the arguments of this function.
|Defines the shape of the gradient.
|Defines the size of the gradient.
|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).