Generador de Conic Gradient
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+).
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.
Herramientas relacionadas
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Elige un color base, obtén armonías clásicas de rueda de color — complementario, split-complementario, triádico, tetrádico, cuadrado, análogo, monocromático.
Mezclador de Color
Interpola entre dos colores en RGB, HSL o CIELAB. Mira una franja de gradiente con pasos intermedios.
Interpolación de Color / Pasos de Gradiente
Elige dos colores hex, obtén N pasos intermedios discretos — en sRGB, linear RGB, OKLab o HSL — con easing opcional.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Colores Nombrados de CSS
Los 147 colores nombrados CSS / X11 con HEX, RGB y muestra en vivo — buscables y agrupados por matiz.