Generador de degradados

Diseña degradados lineales, radiales y cónicos, y exporta CSS o una imagen

Los archivos no salen de tu dispositivo
Se ejecuta en el navegador
Gratis, sin registro ni marca de agua

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

Cómo usar Generador de degradados

Crea degradados lineales, radiales y cónicos con tantos puntos de color como quieras, mezclados en sRGB, OKLab u OKLCH. Copia el resultado como CSS, una clase de Tailwind o SVG, o descárgalo como imagen PNG, JPG o WebP de hasta 8192 px por lado.

1
Elige un Tipo (Lineal, Radial o Cónico) y define el Ángulo, la Forma o el centro; en radial y cónico puedes arrastrar sobre la vista previa para mover el centro.
2
Edita los Puntos de color: haz clic en la barra para añadir un punto, arrastra los controles para moverlos y cambia cada color y posición en la lista.
3
Elige cómo Mezclar colores en (sRGB, OKLab u OKLCH), o empieza desde uno de los Preajustes o Aleatorio.
4
Copia el código de la pestaña CSS, Tailwind o SVG.
5
Para una imagen, define Ancho y Alto o elige un tamaño, selecciona PNG, JPG o WebP y haz clic en Descargar.

Preguntas frecuentes

¿Cuál es la diferencia entre mezclar en sRGB, OKLab y OKLCH?

sRGB es la mezcla clásica de CSS, en la que los colores complementarios pueden volverse grises en el medio. OKLab es perceptualmente uniforme, sin puntos medios turbios. OKLCH mantiene los colores vivos moviéndose por la rueda de tonos.

¿Los degradados OKLab y OKLCH funcionan en navegadores antiguos?

La salida CSS empieza con una línea de respaldo que usa puntos precalculados para navegadores sin soporte de “in oklab” o “in oklch”. El código SVG y las imágenes descargadas también usan puntos precalculados, así que se ven igual en todas partes.

¿Por qué la pestaña SVG está desactivada en los degradados cónicos?

SVG no tiene degradado cónico. Descarga una imagen PNG, JPG o WebP.

¿Puedo usar puntos transparentes?

Sí, funcionan los colores con alfa como rgba() o #rrggbbaa. Descarga PNG o WebP para conservar la transparencia, porque JPG no tiene canal alfa.

¿La imagen se crea en un servidor?

No. La imagen se dibuja en un canvas de tu navegador y se guarda directamente, en cualquier tamaño de 1 a 8192 px por lado.

¿Cómo ajusto un punto con el teclado?

Enfoca un control de punto y usa las flechas para moverlo un 1 % (Mayús para un 10 %), Inicio o Fin para saltar a los extremos y Supr para quitarlo. Un degradado siempre conserva al menos dos puntos.