# Функция repeating-radial-gradient

Функция `repeating-radial-gradient` задает повторяющийся радиальный градиент. Это значит, что мы задаем определенный узор градиента, например, от `0px` до `10px` - градиент от красного к голубому и этот градиент будет повторяться на весь блок: `0px` до `10px`, от `10px` до `20px`, от `20px` до `30px` и так далее.

Функция работает с теми же параметрами, что и `radial-gradient`, отличие только в эффекте повторения. Принимаемые параметры смотрите в описании `radial-gradient`.

## Синтаксис

`селектор { background: repeating-radial-gradient([форма тип позиция], цвет1 размер1, цвет2 размер2...); }`

## Пример

Концентрические круги:

`<div id="elem"></div>` `#elem { background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px); width: 400px; height: 200px; }`

:

## Пример

Концентрические эллипсы:

`<div id="elem"></div>` `#elem { background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px); width: 400px; height: 200px; }`

:

## Пример

Разместим концентрические круги не по центру, а с краю:

`<div id="elem"></div>` `#elem { background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px); width: 400px; height: 200px; }`

:

## Смотрите также

- функцию `repeating-linear-gradient`,
  которая создает повторяющийся линейный градиент
- функцию `linear-gradient`,
  которая создает линейный градиент
- функцию `radial-gradient`,
  которая создает радиальный градиент

← →
↑
en ru