Generador de degradado CSS
Elige lineal, radial o cónico y añade tantas paradas de color como quieras. Arrastra los controladores para reposicionar las paradas en la barra de degradado, copia el CSS o descárgalo como SVG.
Cómo usar este generador de degradado
- Elige un tipo de degradado: Lineal, Radial o Cónico.
- Ajusta el ángulo (lineal), la forma y posición (radial) o el ángulo inicial (cónico).
- Arrastra los controladores redondos en la barra de degradado para reposicionar cada parada de color, o edita el color/porcentaje directamente.
- Añade o elimina paradas libremente. Copia el CSS o descárgalo como SVG.
Preguntas frecuentes
¿Cuál es la diferencia entre lineal, radial y cónico?
El lineal avanza en una dirección (según un ángulo). El radial se irradia desde un punto (círculo o elipse). El cónico gira alrededor de un punto como una aguja — ideal para ruedas de color, gráficos circulares y patrones decorativos en bucle.
¿Por qué mi degradado cónico en SVG se ve distinto?
SVG no admite degradados cónicos de forma nativa. El SVG descargado incrusta el CSS mediante foreignObject, que funciona en los navegadores pero no en todos los editores de SVG. Para compatibilidad completa con editores, usa lineal o radial.
¿Puedo añadir más de 2 paradas?
Sí — no hay límite. Haz clic en «+ Añadir parada» y la nueva parada se colocará automáticamente en el espacio más grande disponible.
¿Por qué mi degradado muestra bandas visibles en las zonas oscuras?
El banding ocurre cuando el degradado pasa entre colores más rápido de lo que 8 bits por canal pueden representar — común en azules y rojos oscuros. Añade una capa de ruido sutil mediante CSS (opacidad 1-2%), usa una diferencia de color mayor entre las paradas, o cambia a degradados OKLCH (CSS admite `linear-gradient(in oklch, ...)` para transiciones perceptuales más suaves).