Función CSS repeating-radial-gradient()

Definición y uso

CSS repeating-radial-gradient() La función se utiliza para crear gradientes radiales repetidos.

Gradiente radial	Gradiente radial repetido

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

Un gradiente radial repetido:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Otra degrade radial repetida, configurada con tamaño, forma y posición:

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

Otra degrade radial repetida, configurada con dos puntos de terminación de color:

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

repeating-radial-gradient(shape size at position, start-color, ... , last-color);

Valor	Descripción
shape	Define la forma de la degrade. Los valores posibles son: ellipse (por defecto) circle
size	Define el tamaño de la degrade. Los valores posibles son: farthest-corner (por defecto) closest-side closest-corner farthest-side
at position	Define la posición de la degrade. El valor predeterminado es "center".
start-color, ... , last-color	Los puntos de terminación de color son los colores que desea que se presenten entre ellos con una transición suave. Este valor se compone de un valor de color y una o dos posiciones de parada opcionales (porcentaje entre 0% y 100% o longitud a lo largo del eje de la degrade).