Generador de degradados

Degradados CSS lineales / radiales / cónicos con paradas de color, vista previa y código copiable

Crea degradados CSS (lineal, radial, cónico) con paradas de color y ángulos personalizados. La vista previa en vivo se actualiza al ajustar cada parada; el CSS generado está listo para copiar en tu hoja de estilos.

Linear

Radial

Conic

Ángulo (deg)

Paradas de color

Posición (%)

Galería de presets

Vista previa

CSS

background: linear-gradient(90deg, #7c3aed 0%, #3b82f6 100%);

Cómo usar

Choose the gradient type: linear, radial, or conic.
Add color stops and drag them to set each color's position; for linear and conic, set the angle in degrees.
The preview pane updates live as you edit.
Copy the generated CSS background value straight into your stylesheet.

Ejemplos

Two stops at #ff7e5f (0%) and #feb47b (100%) on a 90deg linear gradient produce the CSS background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%).
Switching to radial type with the same stops creates a soft glow from the center outward, shown live in the preview.

Verifica las salidas antes de usar en producción. Sin garantía — ver Términos.