Generador de Gradiente CSS Online
Crea gradientes CSS con vista previa en tiempo real. Sin instalaciones, gratis.
background: linear-gradient(135deg, #667eea, #764ba2);
Por qué usarlo
Gradientes CSS perfectos al instante
Vista previa en tiempo real
Ves el resultado mientras ajustas colores, ángulos y posiciones.
Código listo para producción
CSS con sintaxis moderna. Sin prefijos vendor innecesarios.
Compatible con todos los browsers
Verifica compatibilidad y obtén el código correcto para tu target.
Sin instalaciones
Todo en el navegador. No necesitas Figma, Sketch ni plugins.
Cómo funciona
Tres pasos, sin complicaciones
Elige el tipo de gradiente
Selecciona entre gradiente lineal (linear-gradient), radial (radial-gradient) o cónico (conic-gradient). Cada tipo tiene controles específicos.
Configura colores y posiciones
Añade tantos color stops como necesites. Ajusta el ángulo, posición del centro y porcentajes de cada color con los controles visuales.
Copia el código CSS
El código CSS se genera en tiempo real. Copia la propiedad background completa lista para pegar en tu hoja de estilos.
Preguntas frecuentes
¿Tienes dudas?
Un gradiente lineal (linear-gradient) transita entre colores a lo largo de una línea recta con un ángulo definido. Un gradiente radial (radial-gradient) irradia desde un punto central hacia afuera en forma circular o elíptica. Un gradiente cónico (conic-gradient) transita alrededor de un punto central como las agujas de un reloj — es ideal para crear diagramas de tarta o efectos de colores giratorios en CSS puro.
Usa rgba() o la palabra clave 'transparent' como color stop. Por ejemplo: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)) crea un degradado de rojo sólido a rojo completamente transparente. Evita usar 'transparent' directamente en gradientes con colores de fondo oscuro porque los navegadores interpolan a través del negro (rgba(0,0,0,0)), creando un artefacto grisáceo indeseable.
Los gradientes lineales y radiales son compatibles con todos los navegadores modernos desde 2012 (Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+). Los gradientes cónicos son más recientes: compatibles desde Chrome 69 (2018), Firefox 83 (2020) y Safari 12.1 (2019). Para proyectos que requieren soporte de IE11, los gradientes CSS no tienen fallback nativo — deberás usar imágenes SVG como alternativa.
Añade múltiples color stops: linear-gradient(45deg, #ff0000 0%, #ff7700 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Puedes controlar la posición exacta de cada color usando porcentajes o valores absolutos (px, em). Si no especificas posición, los colores se distribuyen equitativamente.
Los gradientes CSS son generados por la GPU del navegador y no requieren petición de red, lo que los hace considerablemente más eficientes que las imágenes. Sin embargo, gradientes CSS muy complejos con muchos color stops pueden tener un impacto en el repaint de la página. Para animaciones de gradiente, el rendimiento puede degradarse en dispositivos móviles de gama baja — considera usar transform o opacity en su lugar, que son propiedades aceleradas por GPU sin causar reflow.
Gradientes CSS: historia, especificación W3C y técnicas avanzadas
Los gradientes en CSS tienen una historia de estandarización compleja. Las primeras implementaciones aparecieron como extensiones propietarias: -webkit-gradient() en Safari 4 (2008) con una sintaxis completamente diferente a la actual. Mozilla implementó -moz-linear-gradient() en Firefox 3.6 (2010). La sintaxis moderna, mucho más intuitiva, fue introducida en el módulo CSS Images Level 3 del W3C, alcanzando el estado de Candidate Recommendation en 2011 y soporte sin prefijos en Chrome 26 y Firefox 16 en 2012. La función conic-gradient() fue propuesta por Lea Verou en 2015 y estandarizada en CSS Images Level 4.
Los gradientes CSS se renderizan completamente en la GPU mediante la capa de composición del navegador (compositor layer), a diferencia de las imágenes rasterizadas que requieren una decodificación previa en CPU. Esto los hace especialmente eficientes para fondos de área grande. Internamente, el motor de renderizado (Skia en Chrome/Edge, WebRender en Firefox) calcula la interpolación de colores en el espacio de color sRGB por defecto. CSS Color Level 4 introduce interpolación en otros espacios de color (oklch, display-p3), lo que permite gradientes perceptivamente más uniformes sin bandas de color indeseadas.
Una técnica avanzada es el 'gradient halftone', que usa múltiples background layers para crear patrones de puntos. Otra es el uso de gradientes como máscaras CSS con mask-image: linear-gradient(), que permite hacer fade-out de elementos sin JavaScript. Para efectos de texto con gradiente, se combina background-clip: text con color: transparent, una técnica popularizada en diseños de UI modernos desde 2015 y ampliamente usada en interfaces de Apple, Google y Meta. Los gradientes también son la base del 'neumorphism' y 'glassmorphism', tendencias de diseño predominantes entre 2019 y 2023.