Developer

CSS GRADIENT GENERATOR

Create, preview, and export CSS linear, radial, and conic gradients. Add and drag color stops, then copy CSS or Tailwind code with one click.

Private by design No signup · Free

History

Gradient Type

Angle

90°

Color Stops

Presets

Library

Live Preview

Output

Color Info

Stops

Linear

Type

90°

Angle

Frequently Asked Questions

¿Cómo lo creo?

Añade paradas, arrástralas: el CSS sale solo.

¿Código Tailwind?

Sí. Exporta con un clic.

¿Qué es cónico?

Degradado angular giratorio, para charts y efectos.

¿Es gratis?

Sí.

How to Use

Elige tipo

Lineal, radial o cónico.

Pon colores

Añade y arrastra paradas.

Copia el código

CSS o Tailwind.

How to Calculate

Las paradas forman el string del degradado.

Sobre esta herramienta

Herramienta visual para fondos bonitos de webs. Con paradas de opacidad, presets y previa en vivo. Código limpio listo para copiar. Gratuita.

Related Tools

Generador Texto Degradado

Generador Paletas

Verificador Contraste

Generador de Sombras CSS

Generador Filtros CSS

Generador de Animaciones CSS

Methodology & feedback

Figures run locally in your browser from the values you enter (page updated 2026-10-02). Estimates are educational only — verify finance, tax and health decisions with a qualified professional (see Disclaimer). Spotted an error? Report it via contact and we correct with a new update date.

Was this tool helpful?