Función CSS repeating-conic-gradient()

Definición y uso

CSS repeating-conic-gradient() La función se utiliza para crear un gradiente cónico repetido.

Ejemplo:

Gradiente cónico Gradiente cónico repetido
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

Ejemplo

Ejemplo 1

Un gradiente conico repetido:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

Prueba tu mismo

Ejemplo 2

Definición de gradiente conico repetido que define los puntos de inicio y final de los colores:

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Prueba tu mismo

Ejemplo 3

Otro gradiente conico repetido que establece el ángulo de inicio y la posición central:

#grad1 {
  background-image: repeating-conic-gradient(desde 10deg en 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Prueba tu mismo

Sintaxis CSS

repeating-conic-gradient(desde ángulo][en posición,] grado de color, grado de color, ... );
Valor Descripción
desde ángulo

Opcional. La gradiente conica completa se rota en este ángulo.

El valor predeterminado es 0deg.
en posición

Opcional. Especifica el punto central del gradiente conico.

El valor predeterminado es center.
grado de color, ... , grado de color

El punto final del color es el color que desea que se muestre en transiciones suaves entre él.

Este valor se compone de valores de color y una o dos posiciones de parada opcionales (ángulos entre 0 y 360 grados o porcentajes entre 0% y 100%)

Detalles técnicos

Versión: Módulo de imágenes CSS Nivel 4

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

Páginas relacionadas

Tutoriales:Gradiente CSS

Referencia:Atributo background-image de CSS

Referencia:Función CSS conic-gradient()

Referencia:Función CSS linear-gradient()

Referencia:Función CSS radial-gradient()

Referencia:Función repeating-linear-gradient() de CSS

Referencia:Función CSS repeating-radial-gradient()