# Breve historia de los degradados en el diseño

[Canonical HTML page](https://gradiently.design/es/guide/history-of-gradients)

Las mezclas de color son más antiguas que las pantallas, pasaron de moda casi de la noche a la mañana y volvieron con más fuerza. Así viajó el degradado, de los cielos pintados a los fondos vivos.

## The short version

- 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.

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](https://gradiently.design/es/guide/what-is-a-gradient) y los [tipos de degradados](https://gradiently.design/es/guide/types-of-gradients).

| 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 |

La historia del degradado de un vistazo.

## 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.

Cielo pintado, del cenit al horizonte: `linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)`

Azul profundo arriba que palidece hacia una bruma cálida en el horizonte: la mezcla que usaban los paisajistas para dar profundidad al espacio.

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](https://gradiently.design/es/guide/color-wheel).

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.

- Tintero dividido, de rojo a azul: `linear-gradient(90deg, #d7263d 0%, #7a4f8f 50%, #1b98e0 100%)`
- Cartel de atardecer con aerógrafo: `linear-gradient(180deg, #1b1340 0%, #7b2d6e 45%, #f06a3f 75%, #ffd27a 100%)`

Dos estilos predigitales. Un tintero dividido mezcla tintas reales, así que su medio es un morado más oscuro; los cielos con aerógrafo apilaban bandas cálidas bajo una parte superior oscura.

## 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](https://gradiently.design/es/guide/gradient-banding).

- Mezcla con bandas, cinco colores: `linear-gradient(90deg, #14145c 0% 20%, #26268a 20% 40%, #3a3ab4 40% 60%, #5454d6 60% 80%, #7676f0 80% 100%)`
- La misma mezcla, lisa: `linear-gradient(90deg, #14145c 0%, #7676f0 100%)`

Lo que hace una paleta limitada a una mezcla. Con solo cinco colores para trabajar, un degradado liso se convierte en una escalera.

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](https://www.w3.org/TR/css-images-3/) y, a principios de la década de 2010, todos los navegadores principales podían dibujar un degradado sin una imagen.

```css
/* 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); }
```

Tres épocas de la misma cabecera. Hoy una sola línea lo hace todo, con una [mezcla OKLCH más suave](https://gradiently.design/es/guide/css-gradient-oklch) cuando la quieres.

## 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.

- Botón de gel estilo Aqua: `linear-gradient(180deg, #d9efff 0%, #8cc8f7 48%, #3d8ee6 52%, #74c1ff 100%)`
- Barra de título estilo Luna: `linear-gradient(180deg, #3a8cf4 0%, #0a5fd8 12%, #0453d0 80%, #0a3fa8 100%)`
- Verde brillante Web 2.0: `linear-gradient(180deg, #b6e67a 0%, #7cc242 50%, #5ea82a 51%, #8fd14f 100%)`
- Cristal estilo Aero: `linear-gradient(180deg, #e8f3fb 0%, #bcd8ee 50%, #9cc3e3 51%, #d2e8f7 100%)`

El truco distintivo de la época: un cambio brusco de tono a mitad de camino, que el ojo lee como un reflejo sobre una superficie brillante.

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](https://gradiently.design/es/guide/y2k-aesthetic) 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.

- Verde brillante estilo iOS 7: `linear-gradient(180deg, #87fc70 0%, #0bd318 100%)`
- De amarillo a violeta pasando por rosa: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%)`
- De violeta a rosa, era de los preajustes: `linear-gradient(135deg, #7f5af0 0%, #ff6ac1 100%)`
- De azul a cian, era de los preajustes: `linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)`

El aspecto del regreso: composiciones planas, mezclas brillantes. Las parejas de dos colores como las dos últimas se volvieron tan comunes que hoy se leen como preajustes.

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](https://gradiently.design/es/guide/why-every-feed-looks-the-same).

## 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.

Un campo de luz suave: `radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)`

Luz en vez de rayas o brillo: melocotón que se enciende en coral, violeta y noche. Mira los [degradados de malla](https://gradiently.design/es/guide/mesh-gradients) y los [degradados con shaders](https://gradiently.design/es/guide/shader-gradients) para saber cómo se hacen los campos de hoy.

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](https://gradiently.design/es/guide/gradient-trends-2026).

Un Mark: una identidad de degradado con un código, un creador y un dueño.

## FAQ

### ¿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.