Función CSS conic-gradient()

Definición y uso

CSS conic-gradient(); La función establece la gradiente conica como imagen de fondo.

La gradiente conica es una transición de color que rodea el punto central girando (similares a un gráfico de pizza y un círculo de colores).

Para crear una gradiente conica, debe definir al menos dos puntos de parada de color.

Ejemplo de gradiente conica:

Ejemplo

Ejemplo 1

Hay una gradiente conica de tres colores:

#grad {
  background-image: conic-gradient(red, yellow, green);
}

Prueba tu mismo

Ejemplo 2

Hay una gradiente conica de cinco colores:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

Prueba tu mismo

Ejemplo 3

Hay tres colores e indica un ángulo para cada color en la gradiente conica:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

Prueba tu mismo

Ejemplo 4

Agregando border-radius: 50% hace que la gradiente conica se parezca a un gráfico de pizza:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Prueba tu mismo

Ejemplo 5

Gradiente conico con ángulo de inicio:

#grad {
  background-image: conic-gradient(de 90deg, red, yellow, green);
  border-radius: 50%;
}

Prueba tu mismo

Ejemplo 6

Gradiente conico con ubicación central:

#grad {
  background-image: conic-gradient(en 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Prueba tu mismo

Ejemplo 7

Gradiente conico con ángulo de inicio y ubicación central:

#grad {
  background-image: conic-gradient(de 90deg en 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Prueba tu mismo

Ejemplo 8

Otro ejemplo de gráfico circular:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

Prueba tu mismo

Sintaxis CSS

background-image: conic-gradient([de ángulo] posición,] grado de color, grado de color, ... );
Valor Descripción
de ángulo Opcional. La gradiente conica completa se rotará en este ángulo. El valor predeterminado es 0deg.
en posición Opcional. Especifica la ubicación central del gradiente conico. El valor predeterminado es center.
grado de color, ... , grado de color

Puntos de parada de color son los colores que desea que se presenten entre transiciones suaves.

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

Detalles técnicos

Versión: CSS3

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 CSS

Referencia：Función CSS linear-gradient()

Referencia：Función CSS radial-gradient()

Referencia：Función CSS repeating-conic-gradient()

Referencia：Función CSS repeating-linear-gradient()

Referencia：Función repeating-radial-gradient() de CSS