Generador de degradados CSS

Utilidades para desarrolladores

Diseña degradados CSS lineales o radiales con vista previa en vivo y CSS listo para copiar.

Cómo usar

Build a gradient

Pick linear or radial, adjust the angle for linear gradients and choose the start and end colors. The preview and CSS update live.

Choose linear or radial.
Set the angle and two colors.
Copy the generated CSS declaration.

Using the CSS

The output is a single background declaration. Paste it into a CSS rule, inline style or style block.

Preguntas frecuentes

What does the angle mean?

The angle controls the direction of a linear gradient in degrees, where 0deg points up and 90deg points right.

Can I add more color stops?

This generator creates two-stop gradients. Add extra stops manually to the copied CSS.

Herramientas relacionadas

Generador de paletas de colores Genera paletas de tonos claros, oscuros, análogos, complementarios y tríada desde cualquier color. Generador de sombras CSS Crea sombras con controles de desplazamiento, desenfoque, expansión y color, y copia el CSS. Conversor de colores Convierte colores entre HEX, RGB y HSL con una muestra de vista previa en vivo. Generador de UUID/GUID Genera UUID aleatorios de versión 4 y cópialos uno a uno o en bloque. Generador de hash Calcula resúmenes MD5, SHA-1, SHA-256 y SHA-512 de cualquier texto. Conversor de marca de tiempo Convierte entre marcas de tiempo Unix, ISO 8601 y fechas locales legibles.