¿Cómo elimino una parada de color?

Selecciona la parada y pulsa Supr o Retroceso, o usa el botón de la papelera. Un degradado siempre conserva al menos dos paradas.

¿Estos degradados funcionan en todos los navegadores?

Los degradados lineales y radiales funcionan en todos los navegadores actuales. Los cónicos funcionan en Chrome, Edge, Firefox y Safari 12.1 o posterior.

¿Puedo mover las paradas con el teclado?

Sí. Enfoca una parada con Tab y usa las flechas (Shift para pasos de 10), Inicio y Fin. El selector de ángulo también funciona con las flechas.

Generador de degradados CSS — Lineal, radial y cónico

Crea degradados CSS lineales, radiales y cónicos con paradas de color arrastrables, selector de ángulo y presets. Copia el CSS o una clase de Tailwind. Gratis.

Paradas de colorClic para añadir · arrastra para mover

CSS

background: #fa69c3;
background: linear-gradient(120deg, #7f5af0 0%, #ff6ac1 52%, #ffb86b 100%);

Tailwind

bg-[linear-gradient(120deg,#7f5af0_0%,#ff6ac1_52%,#ffb86b_100%)]

Presets

Referencias de formatos

MDN — CSS gradients
Tailwind CSS — Arbitrary values

Página de la herramienta actualizada: 2026-10-23

Presets

Guía y ejemplo

Herramientas relacionadas

Referencias de formatos