¿En qué se diferencia conic de linear/radial?

Linear interpola a lo largo de una línea recta; radial a lo largo de un círculo hacia afuera desde un punto; conic interpola alrededor de un círculo (como la esfera de un reloj). Conic es lo que usas cuando el gradiente debe barrer alrededor de un eje — gráficos pie/donut, ruedas de color, patrones de tablero, spinners de carga.

¿Por qué dos paradas en la misma posición?

Crea un borde duro en lugar de una transición suave. `red 0% 25%, blue 25% 50%` significa 'rojo de 0 a 25%, luego inmediatamente azul de 25 a 50%' — perfecto para segmentos de gráficos circulares o patrones de tablero nítidos. Sin solapamiento, obtendrías una mezcla suave.

Generador de Conic Gradient

Color

Los conic gradients CSS siguen siendo subutilizados, en parte porque son difíciles de escribir a mano. Este constructor te da una vista previa en vivo del gradiente aplicado a formas ellipse, square, rectangle o pie, con sliders para el ángulo `from` y la posición de centro `at`. Añade o elimina paradas de color, arrastra posiciones y elige colores con el selector de color del sistema. Cinco presets — arcoíris, sunset, monocromo, tablero de ajedrez y un gráfico de anillo de 3 segmentos — te ponen en marcha. La salida es CSS plano que puedes pegar en cualquier hoja de estilo; funciona en todos los navegadores modernos (Chromium 69+, Firefox 83+, Safari 12.1+).

—

Ángulo From: 0°

Centro X: 50%Centro Y: 50%

Forma de vista previa

Preset:

Paradas de color

0.0%

25.0%

50.0%

75.0%

100.0%

CSS

background: conic-gradient(#ef4444 0%, #f59e0b 25%, #10b981 50%, #3b82f6 75%, #a855f7 100%);

Funciona en todos los navegadores modernos (Chromium 69+, Firefox 83+, Safari 12.1+). Todos los valores son grados y porcentaje.

Cómo usar

Elige un preset o empieza desde el arcoíris por defecto. La vista previa se actualiza al ajustar.
Desliza el ángulo `from` para rotar el gradiente entero. Mueve los sliders de centro para descentrar el ápice cónico.
Añade paradas donde quieras transiciones duras (dos paradas en la misma posición hacen un borde nítido — útil para gráficos circulares).

Preguntas frecuentes

¿En qué se diferencia conic de linear/radial?: Linear interpola a lo largo de una línea recta; radial a lo largo de un círculo hacia afuera desde un punto; conic interpola alrededor de un círculo (como la esfera de un reloj). Conic es lo que usas cuando el gradiente debe barrer alrededor de un eje — gráficos pie/donut, ruedas de color, patrones de tablero, spinners de carga.
¿Por qué dos paradas en la misma posición?: Crea un borde duro en lugar de una transición suave. `red 0% 25%, blue 25% 50%` significa 'rojo de 0 a 25%, luego inmediatamente azul de 25 a 50%' — perfecto para segmentos de gráficos circulares o patrones de tablero nítidos. Sin solapamiento, obtendrías una mezcla suave.