Generador de degradados CSS
Diseña fondos con degradado arrastrando paradas de color sobre una barra, elige el tipo (lineal, radial o cónico) y copia un CSS listo para producción, con color de respaldo y versión moderna en OKLCH sin zonas grises.
Procesado 100% en tu navegador
Ctrl + Enter ejecutarCtrl + C copiar resultado
Cómo usar
- 1Elige el tipo de degradado y ajusta el ángulo o el centro.
- 2Arrastra las paradas sobre la barra; haz clic en la barra para añadir una nueva.
- 3Selecciona una parada para cambiar su color o su posición exacta.
- 4Copia el CSS o comparte el enlace con tu degradado.
Casos de uso
- Fondos de secciones hero, tarjetas y botones.
- Superposiciones de color sobre imágenes.
- Gráficos circulares y ruedas de color con conic-gradient.
- Probar combinaciones de marca antes de llevarlas a Figma o al código.
Preguntas frecuentes
¿Qué diferencia hay entre degradado lineal, radial y cónico?
El lineal avanza en línea recta según un ángulo; el radial se expande desde un centro en forma de círculo o elipse; el cónico gira alrededor de un punto, como las agujas de un reloj, y es ideal para gráficos circulares.
¿Qué aporta la interpolación en OKLCH?
Al mezclar colores en sRGB, la zona central de algunos degradados (por ejemplo azul a amarillo) se vuelve grisácea. Interpolando en OKLCH la transición mantiene colores vivos. El CSS incluye una línea sRGB de respaldo para navegadores antiguos.
¿Necesito prefijos como -webkit-?
No. linear-gradient, radial-gradient y conic-gradient funcionan sin prefijos en todos los navegadores actuales. Además incluimos un color sólido de respaldo.
¿Puedo compartir o guardar un degradado?
Sí. La configuración se guarda en la URL: copia el enlace con «Compartir» y quien lo abra verá exactamente el mismo degradado.