La versión corta
- Los pintores mezclaban el color mucho antes de las pantallas, con transiciones suaves de tono y lejanías azuladas y brumosas para sugerir profundidad y luz.
- Las primeras pantallas de ordenador podían mostrar demasiados pocos colores para mezclas suaves, así que los degradados aparecían como bandas visibles o patrones tramados.
- La interfaz Aqua de Apple, presentada en 2000, hizo de los degradados brillantes un rasgo definitorio de la década siguiente.
- El diseño plano desplazó a los degradados a principios de la década de 2010, con la mayor visibilidad en Windows 8 en 2012 y en iOS 7 en 2013.
- Los degradados volvieron a mediados de la década de 2010, con el icono con degradado de Instagram de 2016 como ejemplo más conocido, y desde entonces han crecido hacia estilos de malla, de grano y basados en shaders.
En esta página
La historia de los degradados en el diseño es la historia de la tecnología alcanzando a la pintura. Los artistas mezclaron el color durante siglos; la imprenta aprendió a imitarlo con puntos y tinta dividida; las primeras pantallas apenas podían mostrarlo; las interfaces brillantes de los años 2000 abusaron de él; el diseño plano lo eliminó; y a mediados de la década de 2010 volvió y ya no se fue. Los degradados de cada época se ven como se ven por las herramientas de su tiempo.
Esta es una historia breve y práctica, con el aspecto de cada época como un degradado que puedes copiar. Para lo básico, mira qué es un degradado y los tipos de degradados.
| Cuándo | Qué pasó | El aspecto del degradado |
|---|---|---|
| Renacimiento | El sfumato y la perspectiva aérea en la pintura | Mezclas suaves de tono, lejanía azul y brumosa |
| 1704 | La Opticks de Newton ordena el espectro en un círculo | El primer círculo cromático |
| Finales del siglo XIX | Impresión con tramas de semitono | Tono hecho de puntos |
| Principios de los 90 | Pantallas de 256 colores | Bandas y tramado |
| De 2000 a 2007 | Aqua, el Luna de Windows XP, la Web 2.0, el Aero de Vista | Brillo, gel y cristal |
| De 2012 a 2014 | Windows 8, iOS 7, Material Design | Color plano, mezclas suaves |
| 2016 | El icono con degradado de Instagram | Vuelven las mezclas brillantes |
| Finales de la década de 2010 en adelante | Malla, cónico, grano, shaders | Campos de luz suaves y movimiento |
Degradados antes de las pantallas: pintura e impresión
Los pintores mezclaban el color mucho antes de que nadie lo llamara degradado. Los artistas del Renacimiento usaban el sfumato, transiciones suaves de tono sin contornos duros, una técnica asociada sobre todo a Leonardo da Vinci. Los paisajistas usaban la perspectiva aérea: las colinas lejanas se desvanecen en una bruma pálida y azulada y el cielo se aclara hacia el horizonte, que es el degradado más antiguo que conocemos casi todos.
linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)La ciencia dio orden a las mezclas de color. Los experimentos de Isaac Newton con el prisma extendieron la luz blanca en un espectro continuo, y su Opticks (1704) dispuso sus colores en un círculo, el antepasado de todo círculo cromático.
La imprenta tuvo que imitar el tono continuo. Las tramas de semitono, desarrolladas a finales del siglo XIX, convertían los tonos en puntos de distintos tamaños. Los impresores también usaban el tintero dividido: dos o más tintas cargadas una junto a otra en una misma prensa, que se mezclaban entre sí sobre los rodillos, una técnica que aún se aprecia en la serigrafía y en la tipografía. El aerógrafo dio a los ilustradores mezclas suaves a mano y marcó buena parte de los carteles y portadas de discos de los años setenta y ochenta.
Las primeras pantallas: bandas, tramado e imágenes en mosaico
Las primeras pantallas de ordenador solo podían mostrar a la vez un conjunto limitado de colores, y las paletas de 256 colores comunes a principios de los años noventa no podían contener una mezcla suave. Los degradados se rompían en rayas visibles, llamadas bandas, o se tramaban en patrones de puntos que el ojo promediaba en una mezcla. Las mismas rayas siguen apareciendo cuando un degradado es largo y sutil; mira las bandas en degradados.
La web primitiva no tenía ninguna función de degradado. Los diseñadores hacían una imagen de degradado de un píxel de ancho y le decían al navegador que la repitiera por toda la página. SVG, una Recomendación del W3C de 2001, sí incluía degradados lineales y radiales, pero los degradados CSS llegaron después: WebKit introdujo una sintaxis con prefijo a finales de los años 2000, la versión estándar se escribió en CSS Images Level 3 y, a principios de la década de 2010, todos los navegadores principales podían dibujar un degradado sin una imagen.
/* Early 2000s: a 1px-wide image, repeated across */
.header { background: #2b7ae0 url(header-bg.png) repeat-x; }
/* 2010s: the browser draws the gradient */
.header { background: linear-gradient(180deg, #6fb4f5, #2b7ae0); }
/* Now: the same blend, interpolated in OKLCH */
.header { background: linear-gradient(180deg in oklch, #6fb4f5, #2b7ae0); }Los brillantes años 2000: Aqua, Luna y la Web 2.0
Apple presentó la interfaz Aqua para Mac OS X en 2000: botones translúcidos y brillantes que parecían gotas de gel de colores, con un reflejo luminoso en la parte superior. Windows XP siguió en 2001 con su tema Luna, barras de título azules con sombreado de degradado y un botón Inicio verde. A mediados de la década, los botones brillantes, los logotipos reflectantes y las sombras suaves eran tan comunes en las webs que el estilo se convirtió en sinónimo de la Web 2.0.
El cristal Aero de Windows Vista en 2007 fue más lejos hacia la translucidez. El problema fue la repetición: cuando todos los botones, insignias y logotipos llevaban el mismo brillo, el brillo dejó de señalar calidad y empezó a señalar una plantilla. La guía de la estética Y2K trata el aspecto general de aquellos años.
El giro del diseño plano: Metro e iOS 7
El lenguaje de diseño Metro de Microsoft, primero en Windows Phone y luego en todo Windows 8 en 2012, usaba mosaicos de color sólido, tipografía sencilla y ningún brillo. El iOS 7 de Apple, en 2013, abandonó el cuero cosido, el fieltro y las texturas de las versiones anteriores por un diseño plano y claro. El Material Design de Google, presentado en 2014, mantuvo el color plano pero usó la sombra para mostrar capas.
Los 2000 brillantes
- Un reflejo duro a mitad de camino
- Reflejos y biseles
- Degradados en cada control, como decoración
- Imitaciones de materiales reales
Los 2010 planos
- Color sólido o una mezcla suave de dos tonos
- Sin biseles, sombra mínima
- El color usado para organizar, no para decorar
- Tipografía y espacio haciendo el trabajo
Los degradados no desaparecieron; cambiaron de carácter. Muchos de los nuevos iconos de apps de iOS 7 usaban degradados brillantes y suaves de arriba abajo en vez de brillo, una pista de lo que venía.
El degradado vuelve: Instagram y mediados de la década de 2010
En 2016 Instagram sustituyó el icono de su cámara por un contorno sencillo sobre un degradado de cálido a violeta, uno de los degradados de marca más visibles jamás hechos. Por la misma época, las apps y las marcas empezaron a combinar composiciones planas con degradados atrevidos y brillantes, a menudo dos colores mezclados en ángulo. El diseño plano había despejado la decoración; los degradados volvieron como color y ambiente, no como falso brillo.
Ese éxito tuvo un coste. Los generadores y las herramientas de diseño repartían las mismas parejas y, a finales de la década, muchos feeds se parecían, un problema que se trata en por qué todos los feeds se parecen.
Degradados hoy: malla, grano, shaders y movimiento
El último capítulo trata de riqueza y control. Los degradados de malla, con varios puntos de color que tiran en direcciones distintas, pasaron de las herramientas vectoriales especializadas a las apps de diseño de uso diario. conic-gradient(), definido en CSS Images Level 4, llegó a los navegadores desde 2018. Los shaders WebGL permiten a las webs renderizar degradados que se mueven y responden en tiempo real, el grano volvió para que el color digital se sintiera físico y, en 2025, Apple presentó Liquid Glass, un material translúcido en todas sus plataformas.
radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)La idea más nueva es que un degradado puede ser una identidad con dueño, no un estilo que cualquiera pueda copiar. Los Marks de Gradiently son degradados vivos: colores, materiales, luz, grano y movimiento como una sola receta, cada uno con un código público y exactamente un dueño a la vez. Para saber hacia dónde va todo, mira las tendencias de degradados 2026.
GR·BBGB·1K
Lilac Pulse
Ver este MarkPreguntas frecuentes
¿Cuándo se introdujeron los degradados CSS?
WebKit introdujo una sintaxis de degradado con prefijo a finales de los años 2000, y los estándares linear-gradient() y radial-gradient() se definieron en CSS Images Level 3. A principios de la década de 2010, todos los navegadores principales los admitían sin una imagen.
¿Por qué pasaron de moda los degradados?
A finales de los años 2000 los degradados brillantes estaban en casi todos los botones y logotipos, así que dejaron de sentirse especiales. El diseño plano, con Windows 8 en 2012 e iOS 7 en 2013 al frente, los sustituyó por color sólido y tipografía sencilla.
¿Cuándo volvieron a estar de moda los degradados?
A mediados de la década de 2010. El icono con degradado de Instagram de 2016 es el ejemplo más conocido, y las mezclas brillantes de dos colores se extendieron poco después por apps, webs y marcas.
¿Qué era la interfaz Aqua de Apple?
Aqua fue el aspecto que Apple presentó para Mac OS X en 2000, con botones brillantes como de gel y superficies translúcidas. Marcó el estilo de degradado brillante de la década.
¿Qué vino después del diseño plano?
Composiciones planas con color rico: primero degradados brillantes, luego degradados de malla, grano, movimiento con shaders y, más recientemente, materiales translúcidos como el Liquid Glass de Apple.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
