Función CSS repeating-radial-gradient()

Ejemplo

Gradiente radial repetido:

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

La función repeating-radial-gradient() se utiliza para crear "imágenes" de gradiente radial repetido.

Versión compatible: CSS3

Los números en la tabla indican la primera versión del navegador que admite la función.

El número especificado por "webkit", "moz" u "o" es el prefijo de la primera versión que admite la función.

Función
repeating-radial-gradient()	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-

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

Valor	Descripción
shape	Define la forma del gradiente. Puede ser: ellipse (predeterminado): especifica un gradiente radial elíptico. circle: especifica un gradiente radial circular.
size	La posición específica del contorno del borde. Puede ser uno de los siguientes valores: farthest-corner (predeterminado): especifica que la longitud del radio del gradiente radial es desde el centro del círculo hasta la esquina más alejada del centro. closest-side: especifica que la longitud del radio del gradiente radial es desde el centro del círculo hasta el lado más cercano al centro. closest-corner: especifica que la longitud del radio del gradiente radial es desde el centro del círculo hasta la esquina más cercana al centro. farthest-side: opuesto a closest-side, especifica que la longitud del radio del gradiente radial es desde el centro del círculo hasta el lado más alejado del centro.
position	La posición del centro del círculo, similar a background-position o transform-origin. Por defecto es "center".
start-color, ..., last-color	Se utiliza para especificar los colores de inicio y fin del gradiente. Se pueden usar valores de longitud o porcentajes para especificar la posición de los colores de inicio y fin, pero no se permiten valores negativos.

Tutorial de CSS:Gradientes CSS3

Otras extensiones