Generador de degradados CSS

Genera degradados CSS.

Cómo usar

Cuatro pasos: pega, ejecuta, revisa y copia. Todo ocurre en tu navegador.

Pega el contenido

Pega el contenido

Introduce CSS, HTML, JSON u otro texto. No se sube nada.

Ejecuta la herramienta

Ejecuta la herramienta

Pulsa Convertir o Ejecutar. El resultado aparece al instante.

Revisa la salida

Revisa la salida

Lee el código generado y las notas antes de usarlo.

Copia y usa

Copia y usa

Copia el resultado y pégalo en tu proyecto.

Sobre esta herramienta

Crea un degradado lineal de dos paradas, lo muestra en vista previa y permite copiar tanto el CSS puro como una clase de fondo arbitraria de Tailwind.

Ejemplo

Los valores por defecto muestran un lavado diagonal de azul cielo a verde.

Entrada

135deg · #0ea5e9 → #22c55e

Salida

background: linear-gradient(135deg, #0ea5e9, #22c55e);

Consejo

Los degradados de marca con muchas paradas siguen viviendo mejor en variables CSS.