CSS repeating-radial-gradient() Function

❮ Previous Functions Next ❯


div {
  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.

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.


Function Arguments

The following table describes the arguments of this function.

Argument Description
shape Defines the shape of the gradient.

Possible values:

  • ellipse (default)
  • circle
size Defines the size of the gradient.

Possible values:

  • farthest-corner (default)
  • closest-side
  • closest-corner
  • farthest-side
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).
❮ Previous Functions Next ❯