The repeating-radial-gradient function

The repeating-radial-gradient function specifies a repeating radial gradient. This means that we set a certain gradient pattern, for example, from 0px to 10px - a gradient from red to blue and this gradient will be repeated throughout the entire block: 0px to 10px, from 10px to 20px, from 20px to 30px and so on.

The function works with the same parameters as radial-gradient, the only difference is the repetition effect. For accepted parameters, see description radial-gradient.

Syntax

cssselector {
  background: repeating-radial-gradient([shape type position], color1 length1, color2 length2...);
}

Example

Concentric circles:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Example

Concentric ellipses:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

Example

Let's place concentric circles not in the center, but on the edge:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

See also