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

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

См. все функции для работы с CSS градиентами: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.

Синтаксис

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

Можно задавать несколько градиентов, перечисляя их через запятую (главное чтобы они не перекрывали друг друга иначе победит только один из них):

селектор {
	background: 
	linear-gradient(to right, red 0px, blue 30px, transparent 30px), 
	radial-gradient(circle closest-side at center, green, transparent);

}

Примеры

Пример

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

#elem {
	background: red; /* Для старых браузров */
	background: -webkit-repeating-radial-gradient(circle at center, red 0px, red 4px, white 4px, white 8px);
	background: -moz-repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
	background: -o-repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
	background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

Результат выполнения кода:

Пример

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

#elem {
	background: red; /* Для старых браузров */
	background: -webkit-repeating-radial-gradient(ellipse at center, red 0px, red 2px, white 2px, white 4px);
	background: -moz-repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
	background: -o-repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
	background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
	width: 400px;
	height: 200px;
}

Результат выполнения кода:

Пример

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

#elem {
	background: red; /* Для старых браузров */
	background: -webkit-repeating-radial-gradient(circle at 50px 100px, red 0px, red 4px, white 4px, white 8px);
	background: -moz-repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
	background: -o-repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
	background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

Результат выполнения кода: