Degradados cónicos: ruedas de color, gráficos y brillos

Un degradado cónico cambia de color al barrer alrededor de un punto central, igual que la aguja de un reloj se mueve por su esfera. Un degradado lineal cambia a lo largo de una línea y uno radial cambia al alejarse del centro, pero uno cónico cambia con el ángulo. Si miras desde arriba un cono pintado en bandas verías lo mismo, y de ahí viene el nombre. Figma y otras herramientas lo llaman degradado angular.

Ese comportamiento basado en el ángulo hace que los degradados cónicos sirvan para cosas que otros degradados no pueden hacer: ruedas de color, gráficos circulares, metal cepillado, estallidos y haces de luz. Esta guía cubre cada uno con ejemplos en vivo. La sintaxis CSS completa está en CSS conic-gradient().

Cómo funciona un degradado cónico

Defines un centro, un ángulo inicial y una lista de colores con ángulos o porcentajes. Cero grados apunta hacia arriba y el barrido avanza en el sentido de las agujas del reloj. Donde acaba un color y empieza el siguiente hay un punto de color, igual que en otros degradados, salvo que el 25% significa un cuarto de vuelta, no un cuarto del ancho.

Esa repetición del primer color al final importa. Si el último punto es distinto del primero, aparece una línea dura justo hacia arriba desde el centro, donde el barrido se encuentra con su propio comienzo. La guía de la rueda de color explica cómo leer los tonos de una rueda como esta.

Ejemplos de degradado cónico para diseño

Gráficos circulares y de anillo

Da a cada color un ángulo de inicio y de fin y el degradado se convierte en un gráfico circular sin imagen ni biblioteca de gráficos. Añade una máscara circular y se vuelve un gráfico de anillo. Sirve para datos sencillos y decorativos en publicaciones y diapositivas. Para informes de verdad, añade etiquetas, porque un gráfico que depende solo del color falla a quienes ven el color de otra manera.

.donut {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* 45%, 30% and 25% of the circle */
  background: conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%);
  /* cut out the middle */
  mask: radial-gradient(circle, transparent 55%, #000 56%);
}

Metal y brillo

El acero cepillado, un disco de vinilo y un botón satinado reflejan la luz en cuñas alrededor de su centro. Alternar grises claros y oscuros en un degradado cónico lo imita. Usa entre cuatro y seis alternancias; menos parece una pelota de playa, más parece un gráfico. Tiñe los grises ligeramente cálidos para el oro o el latón y ligeramente azules para el cromo.

Haces y estallidos

Pon el centro por encima o fuera del encuadre y una cuña estrecha y brillante se convierte en un haz de foco o en un rayo de luz por una ventana. Un degradado cónico repetido con cuñas alternas se convierte en un sunburst, el recurso retro de los carteles de rebajas. Mantén los estallidos detrás de un titular grande y sencillo; por sí solos son ruidosos.

Iridiscencia

La iridiscencia real cambia de tono según el ángulo de visión. Un barrido cónico suave de pasteles, con el centro a un lado, se acerca sorprendentemente. Es la base de la mayoría de los degradados holográficos.

Cónico, radial o lineal

Si dudas, pregúntate qué hace la luz en tu imagen. La luz que cae sobre una superficie es lineal. La luz que sale de una fuente es radial. La luz que se refleja en algo que gira o es curvo es cónica. Los tipos de degradado los muestra todos uno junto a otro.

Cómo acertar con los degradados cónicos

1. 1

   Decide dónde va el centro

   Un degradado cónico centrado parece un gráfico o una rueda. Mover el centro a una esquina o fuera del encuadre lo convierte en luz y brillo.

2. 2

   Cierra el círculo

   Repite el primer color al final a menos que quieras una costura visible. Las costuras duras son solo para gráficos y estallidos.

3. 3

   Oculta o suaviza el punto

   Todo degradado cónico se estrecha hasta un punto afilado en el centro. Pon encima un logo, un círculo o el borde del encuadre, o desenfoca la capa.

4. 4

   Usa un ángulo inicial

   Girar el inicio con from mueve dónde cae la cuña más brillante, que a menudo es todo lo que necesita una composición.

5. 5

   Combina con otros tipos

   Un brillo cónico sutil sobre una base lineal o radial añade sensación de material sin llamar la atención sobre sí mismo.

Los degradados cónicos también hacen patrones: una versión repetida con cuatro cuartos duros dibuja un tablero de ajedrez en una línea. Los patrones CSS los cubren.