Função repeating-radial-gradient

A função repeating-radial-gradient define um gradiente radial repetitivo. Isso significa que definimos um padrão específico de gradiente, por exemplo, de 0px a 10px - gradiente de vermelho para azul claro e este gradiente se repetirá por todo o bloco: de 0px a 10px, de 10px a 20px, de 20px a 30px e assim por diante.

A função funciona com os mesmos parâmetros que radial-gradient, a diferença está apenas no efeito de repetição. Consulte os parâmetros aceitos na descrição de radial-gradient.

Sintaxe

seletor {
	background: repeating-radial-gradient([forma tipo posição], cor1 tamanho1, cor2 tamanho2...);
}

Exemplo

Círculos concêntricos:

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

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

Exemplo

Elipses concêntricas:

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

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

Exemplo

Vamos posicionar os círculos concêntricos não no centro, mas na borda:

<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;
}

Veja também

a função repeating-linear-gradient,
que cria um gradiente linear repetitivo
a função linear-gradient,
que cria um gradiente linear
a função radial-gradient,
que cria um gradiente radial