Degradado cónico CSS: ruedas, gráficos circulares y brillos

Un degradado cónico CSS barre el color alrededor de un punto central, igual que la aguja de un reloj recorre su esfera. Donde un degradado lineal cambia a lo largo de una línea y uno radial cambia hacia fuera desde el centro, conic-gradient() cambia con el ángulo. Empieza arriba, avanza en el sentido de las agujas del reloj y se usa en cualquier sitio donde CSS admita una imagen. Eso lo convierte en la herramienta natural para ruedas de color, gráficos circulares, anillos de carga y los reflejos angulares del metal cepillado.

Si estás eligiendo entre tipos de degradado para un diseño y no aprendiendo la sintaxis, los tipos de degradado y la guía de diseño de degradados cónicos son mejores puntos de partida.

La sintaxis de conic-gradient()

/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)

Los ángulos avanzan en el sentido de las agujas del reloj desde arriba: 90deg son las tres en punto, 180deg las seis. La definición completa está en la página de conic-gradient() de MDN. La compatibilidad es universal desde hace años en las versiones actuales de Chrome, Edge, Safari y Firefox, así que no hacen falta prefijos.

Girar y mover el barrido

from gira todo el degradado, útil cuando la costura entre el primer y el último color quedaría arriba. at mueve el centro. Llevarlo a una esquina convierte la rueda en un abanico de rayos, y sacarlo por completo de la caja da un suave velo inclinado que no se parece en nada a una rueda.

Gráficos circulares y de anillo en CSS

Da a cada porción un inicio y un final, y deja que cada una empiece donde acabó la anterior. Escribir 0 como segunda posición de un punto es un atajo: una posición menor que la anterior se ajusta a ella, así que el color nuevo empieza justo donde acabó el último. Redondea el elemento con border-radius: 50% y recorta un agujero con una máscara radial para convertir el gráfico circular en uno de anillo.

.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}

Los bordes duros de los degradados cónicos pueden verse algo dentados a lo largo de las líneas de las porciones en algunos navegadores. Si te molesta, deja una fracción de grado entre los puntos, como #6366f1 0 39.8%, #22d3ee 40.2% 65%, para que el borde tenga un pelo de mezcla.

Ruedas de color con interpolación de tono

Una rueda de color suele necesitar seis o siete puntos. Con los métodos de interpolación puedes pedir al navegador que recorra él mismo el círculo de tonos. longer hue toma el camino largo entre dos tonos, y cuando ambos puntos son el mismo color, el camino largo es el círculo entero, así que dos rojos dan un espectro completo.

.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}

Brillo metálico y reflejos

El metal cepillado y los discos pulidos reales captan la luz en bandas angulares, que es justo lo que dibuja un degradado cónico. Alterna unos cuantos grises claros y oscuros, con espaciado desigual, y la superficie se lee como metal. En capas con poca opacidad sobre un color, el mismo truco añade brillo a botones y tarjetas; mira los botones con degradado para un ejemplo trabajado.

Degradados cónicos repetidos para patrones

repeating-conic-gradient() repite su lista de puntos alrededor de la vuelta. Los puntos cortos de bordes duros dan estallidos. Junto con background-size, un patrón de cuartos de dos colores se repite formando un tablero de ajedrez, un patrón que de otro modo es incómodo de dibujar con degradados. Más en los patrones CSS.

.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 32px 32px;
}