Cómo crear degradados cónicos con conic-gradient en CSS
¿Qué es conic-gradient y cómo se utiliza?
conic-gradient crea un degradado con colores que rotan en torno a un centro, similar a los colores de una rueda cromática. Se puede personalizar la posición inicial del degradado, el ángulo de rotación, y la distribución de los colores.
Sintaxis básica:
.elemento {
background: conic-gradient(red, yellow, green);
}En el ejemplo anterior, se genera un degradado cónico que transiciona de rojo a amarillo y luego a verde en un círculo completo de 360°.
Estructura de conic-gradient:
- Colores: Se definen los colores en secuencia para crear la transición.
-
Ángulo de inicio (opcional): Se puede especificar un ángulo inicial con
from, por ejemplo:from 45deg. -
Posición del centro (opcional): Controla el punto de inicio del degradado, por defecto es el centro del contenedor (
center).
Ejemplos de uso de conic-gradient
1. Degradado circular básico:
.degradado-basico {
width: 200px;
height: 200px;
background: conic-gradient(blue, purple, pink);
}Crea un degradado cónico que transiciona entre azul, morado y rosa.
2. Degradado cónico con ángulo inicial:
.degradado-angulo {
width: 200px;
height: 200px;
background: conic-gradient(from 90deg, red, yellow, red);
}El degradado comienza desde un ángulo de 90 grados (la parte superior del círculo).
3. Gráfico de progreso o donut:
.grafico-donut {
width: 200px;
height: 200px;
background: conic-gradient(green 75%, lightgray 0);
border-radius: 50%;
}Este ejemplo crea un gráfico en forma de donut que representa un 75% de progreso en color verde y el resto en gris.
4. Degradado segmentado:
.degradado-segmentado {
width: 200px;
height: 200px;
background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 270deg, yellow 270deg 360deg);
}Se definen segmentos de diferentes colores para cada cuadrante del círculo.
Referencia oficial
Para más detalles sobre la propiedad, consulta la documentación oficial de MDN sobre conic-gradient.
Jorge García
Fullstack developer