🌈

generador gradientes CSS

Crea y previsualiza gradientes CSS lineales y radiales. Copia código CSS listo para usar.

Herramientas de diseño Se ejecuta localmente No se envían datos
Degradado CSS lineal radial diseño
Tipo de degradado
Dirección
●
Paradas de color
Salida CSS

¿Qué es el generador gradientes CSS?

Crea y previsualiza gradientes CSS lineales y radiales. Añade paradas de color, elige la dirección y copia al instante el código CSS listo para usar.

Cómo usar el generador de degradados

  1. Elige si quieres un degradado lineal o radial.
  2. Añade o ajusta las paradas de color hasta que la mezcla se vea bien.
  3. Ajusta los valores de ángulo, posición o dispersión en la vista previa en vivo.
  4. Copia el CSS generado cuando estés listo para usarlo en tu proyecto.

Herramientas relacionadas

🎨
generador paleta colores
Genera paletas de colores complementarias, análogas y triádicas
 🎨
selector de color
Convierte colores entre HEX, RGB, HSL y CMYK
 ⚖️
verificador contraste WCAG
Comprueba los ratios de contraste de color WCAG AA y AAA para la accesibilidad
Entiende los degradados CSS ▾
Ejemplo
Entrada Lineal, 90°, paradas: #6366F1 → #8B5CF6
Salida background: linear-gradient(90deg, #6366F1, #8B5CF6);
Casos de uso comunes
  • Crea degradados de fondo hero para páginas de marketing
  • Prueba ajustes de ángulo y paradas antes de editar archivos CSS
  • Genera fondos de botones o tarjetas con acabado profesional
  • Comparte el CSS exacto del degradado con desarrolladores sin conversión manual
Preguntas frecuentes
¿Necesito prefijos de proveedor como -webkit-linear-gradient?

No — todos los navegadores modernos (Chrome, Firefox, Safari, Edge) admiten degradados CSS sin prefijos. Los prefijos de proveedor solo son necesarios para navegadores muy antiguos (IE 9 y anteriores).

¿Puedo usar paradas de color transparentes?

Sí — usa colores rgba() o hsla() con un valor alfa de 0 para crear desvanecidos a transparente. Por ejemplo: rgba(99, 102, 241, 0) desvanece el índigo hasta hacerlo invisible.

¿Puedo usar este degradado en texto?

Sí — copia el valor del degradado y úsalo con propiedades CSS: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

¿Cuál es el número máximo de paradas de color?

Esta herramienta admite hasta 6 paradas de color. El propio CSS no tiene un límite estricto — los navegadores admiten degradados con docenas de paradas, aunque el rendimiento puede variar.