Herramientas/Código & Desarrollo/Generador de Gradientes CSS

Generador de Gradientes CSS

Genera código de gradientes CSS.

100% en dispositivo · 0 subidas

Color 1

Color 2

Tipo de degradado

Ángulo: 90°

background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);

01 · Ilimitado

Úsalo tantas veces como quieras — totalmente gratis.

02 · Privado

Tus archivos nunca salen de tu dispositivo; todo funciona en tu navegador.

03 · Rápido

El procesamiento es local y termina en segundos.

Cómo crear degradados CSS

Elige tus colores

Selecciona dos o más colores con los selectores visuales.

Ajusta tipo y ángulo

Cambia entre lineal y radial, rota la dirección, reposiciona las paradas.

Copia el código CSS

Toma la propiedad background lista y pégala en tu hoja de estilos.

¿Por qué este generador de degradados?

✓Edición visual con vista previa en vivo

✓Lineal y radial con control total de ángulo

✓Salida CSS limpia para copiar y pegar

✓Gratis, instantáneo, sin registro

Preguntas frecuentes

¿Qué tipos de degradado se soportan?+

Degradados lineales en cualquier ángulo y radiales desde un punto central — los dos caballos de batalla que cubren prácticamente todo el diseño de interfaces.

¿El CSS generado es compatible en todas partes?+

Sí — la sintaxis estándar linear-gradient() y radial-gradient() lleva años soportada por todos los navegadores, sin prefijos.

¿Cómo hago que los degradados se vean profesionales?+

Mantén tonos vecinos cercanos (azul a morado, no azul a naranja), evita extremos negro/blanco puros y considera un ángulo sutil como 135° en vez de recto hacia abajo.

¿Puedo usar más de dos colores?+

Sí — añade múltiples paradas de color para transiciones multicolor estilo amanecer. La vista previa se actualiza en vivo.