Generador de degradados CSS

Diseña un degradado lineal o radial, añade cuantos puntos de color quieras y copia el CSS al instante. La vista previa se actualiza al cambiar colores, posiciones y ángulo.

Cómo usarlo

Elige lineal o radial, ajusta el ángulo (para lineal) y elige colores con sus posiciones. Añade más puntos para degradados multicolor; la vista previa es en vivo.

Cuando te guste, copia la línea background directamente en tu hoja de estilos. Es CSS estándar que funciona en todos los navegadores modernos.

Preguntas frecuentes

¿Qué CSS genera?

Una declaración estándar background: linear-gradient(...) o radial-gradient(...) que pegas directamente en tu CSS.

¿Puedo usar más de dos colores?

Sí — añade cuantos puntos de color quieras, cada uno con su posición, para degradados multicolor suaves.

¿Funcionan en todos los navegadores?

Los degradados lineales y radiales se admiten en todos los navegadores modernos sin prefijos.

¿Puedo fijar la dirección?

Sí — para lineales usa el control de ángulo (0–360°); los radiales parten del centro.

Más herramientas