Generador de Gradientes CSS

Diseña gradientes CSS lineales y radiales visualmente. Añade múltiples paradas de color, ajusta el ángulo y copia el código CSS listo para usar.

Ángulo 90°

Paradas de Color

100%

Código CSS

Cómo Usar el Generador de Gradientes CSS

Elige el tipo de gradiente: Lineal o Radial.
Ajusta el ángulo (para lineal) y las paradas de color con los selectores de color y los deslizadores.
Copia el código CSS generado y pégalo en tu hoja de estilos.

Características

Vista previa del gradiente en tiempo real
Tipos de gradiente lineal y radial
Añade hasta 10 paradas de color
Ajusta el ángulo de 0° a 360° para gradientes lineales
El CSS generado es compatible con todos los navegadores modernos
Sin carga al servidor — completamente en el navegador

Preguntas Frecuentes

¿Qué navegadores soportan los gradientes CSS? +

Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan completamente los gradientes CSS sin prefijos de proveedor. Internet Explorer 10+ también los soporta con el prefijo -ms-, pero esta herramienta genera CSS estándar que funciona en todos los navegadores modernos.

¿Qué es una parada de color? +

Una parada de color define dónde aparece un color específico a lo largo del gradiente. Cada parada tiene un color y una posición (0%–100%). El navegador interpola suavemente entre las paradas.

¿Cómo uso el CSS en mi proyecto? +

Copia el CSS generado y úsalo como valor de la propiedad `background` o `background-image` en tu archivo CSS: `background: linear-gradient(90deg, var(--color-primary,#B04A45) 0%, var(--color-convert,#06B6D4) 100%);`

¿Puedo crear gradientes transparentes? +

Sí. Usa un selector de color que soporte transparencia, o edita manualmente el CSS generado para usar valores de color rgba() con canal alfa.

Generador de Gradientes CSS

Cómo Usar el Generador de Gradientes CSS

Características