# Estética años 80: neón, cromo y degradados de atardecer

[Canonical HTML page](https://gradiently.design/es/guide/80s-aesthetic)

Tubos de neón, letra cromada, un sol rayado que se hunde en una rejilla brillante. El look de los 80 se ha revivido tanto que ya tiene su propio género musical. Aquí tienes cómo construirlo, con códigos.

## The short version

- La estética de los 80 se construye con colores neón sobre fondos oscuros, letras cromadas, degradados de atardecer, rejillas en perspectiva y tonos pastel de Miami.
- Gran parte de lo que hoy se llama estética de los 80 pasa por el filtro del synthwave, un estilo musical y visual que revivió desde los años 2000 el cine, los recreativos y la cultura del sintetizador de los años ochenta.
- Un degradado de atardecer que va del amarillo al naranja, al rosa y al violeta, a menudo cortado en bandas horizontales, es el fondo más reconocible de los 80.
- La letra cromada imita el metal pulido con una nítida línea de horizonte en medio de las letras, donde el reflejo de un cielo claro se encuentra con el de un suelo oscuro.
- El neón funciona mejor como líneas y formas sobre fondo oscuro; mantén el resplandor lejos del texto corrido para que siga siendo legible.

La **estética de los 80** es neón sobre negro, letras cromadas, degradados de atardecer cortados en bandas y una rejilla brillante que corre hasta el horizonte, con un lado más suave de pasteles de Miami y patrones Memphis. Casi toda la versión actual llega a través del synthwave, un estilo que revivió desde los años 2000 las películas, los videojuegos recreativos y la música de sintetizador de los años ochenta. Debajo tienes sus ingredientes clave, paletas con códigos, el CSS de un atardecer y una rejilla, y cómo usarla sin caer en el disfraz.

## Los ingredientes de la estética de los 80

| Ingrediente | De dónde viene | Úsalo para |
| --- | --- | --- |
| Rosa y cian neón | Rótulos, discotecas, máquinas recreativas | Líneas, formas y acentos sobre fondos oscuros |
| Degradados de atardecer | Portadas de discos, carteles de cine, gráficos de vacaciones | Fondos y un sol rayado |
| Letra cromada | Logos de películas, coches y electrónica | Titulares de una o dos palabras |
| Rejillas en perspectiva | Primeros gráficos por ordenador y recreativos | El suelo de una escena, un separador de sección |
| Pasteles de Miami | Hoteles Art Déco y televisión de la década | Versiones más claras y soleadas del look |
| Formas Memphis | El colectivo de diseño milanés de principios de los 80 | Patrones divertidos y confeti |
| Textura VHS | Vídeo doméstico | Líneas de escaneo y grano sobre las imágenes |

Siete ingredientes. Dos o tres bastan para un diseño de los 80 convincente; los siete hacen una fiesta temática.

## Estética de los 80 y synthwave

El synthwave, a veces llamado outrun por el videojuego de conducción de Sega de 1986, es un género musical que creció en línea desde mediados de los años 2000 y toma mucho de las bandas sonoras del cine de los 80. Su arte definió el aspecto que mucha gente imagina hoy: un cielo violeta oscuro, un sol rayado, una rejilla magenta y letra cromada. La película *Drive*, de 2011, y su banda sonora ayudaron a llevar el estilo al gran público.

Así que cuando un briefing dice años 80, pregunta cuáles. La versión nocturna del synthwave, la versión diurna de pastel de Miami y la versión de patrones Memphis son tres looks distintos. [Colores synthwave](https://gradiently.design/es/guide/synthwave-colors) y [colores vaporwave](https://gradiently.design/es/guide/vaporwave-colors) profundizan en los dos revivals de internet, y [diseño Memphis](https://gradiently.design/es/guide/memphis-design) cubre el lado de los patrones.

## Paletas de colores de los 80

- Medianoche: #0b0221
- Violeta profundo: #2b0a4a
- Magenta neón: #ff2fd0
- Cian láser: #00f0ff
- Amarillo sol: #ffd319

Noche de neón. Casi todo el espacio es medianoche y violeta; los neones son líneas, el amarillo es el sol.

- Flamenco: #ff9ecd
- Piscina: #7fe7dc
- Melocotón: #ffd1a9
- Estuco: #fdf7f2
- Texto nocturno: #2d1e4a

Día en Miami. Pasteles sobre un blanco cálido, con un violeta profundo para el texto para que siga siendo legible.

- Atardecer outrun: `linear-gradient(180deg, #ffd319 0%, #ff901f 30%, #ff2975 60%, #8c1eff 100%)`
- Sol cortado: `linear-gradient(180deg, #ffd319 0% 45%, #1a0533 45% 48%, #ff901f 48% 62%, #1a0533 62% 66%, #ff2975 66% 80%, #1a0533 80% 85%, #c2185b 85% 100%)`
- Cromo: `linear-gradient(180deg, #f4f8ff 0%, #9fb3d1 49%, #1b2a4a 50%, #4a5b7c 62%, #e6edf7 100%)`
- Horizonte de neón: `radial-gradient(circle at 50% 110%, #ff2fd0 0%, #6a0dad 35%, #0b0221 75%)`
- Pastel de Miami: `linear-gradient(135deg, #ff9ecd 0%, #ffd1a9 50%, #7fe7dc 100%)`
- Líneas láser: `repeating-linear-gradient(90deg, #0b0221 0 38px, #00f0ff 38px 40px)`

Seis degradados de los 80 para copiar. El sol cortado usa paradas duras para abrir bandas oscuras en la mitad inferior, el clásico sol synthwave.

El degradado cromado es el que hay que estudiar. El metal pulido refleja un cielo claro sobre un suelo oscuro, así que el color va de claro, se profundiza hacia el medio, salta a oscuro en una línea de horizonte nítida y vuelve a aclararse hacia abajo. Esa línea dura es lo que hace que se lea como metal y no como gris. [Efectos de texto cromado](https://gradiently.design/es/guide/chrome-effect) muestra cómo aplicarlo a la rotulación, y [degradados de atardecer](https://gradiently.design/es/guide/sunset-gradient) tiene versiones más suaves del cielo.

## Construye un atardecer y una rejilla de los 80 en CSS

```css
.scene {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #0b0221 0%, #2b0a4a 55%, #0b0221 55%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(40vw, 320px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff901f 45%, #ff2975 80%);
  /* slice the lower half into bands */
  mask-image: linear-gradient(180deg, #000 0 58%, transparent 58% 61%, #000 61% 70%, transparent 70% 74%, #000 74% 83%, transparent 83% 88%, #000 88%);
}

.floor {
  position: absolute;
  left: -50%;
  right: -50%;
  top: 55%;
  bottom: -20%;
  background-image:
    linear-gradient(#ff2fd0 2px, transparent 2px),
    linear-gradient(90deg, #ff2fd0 2px, transparent 2px);
  background-size: 60px 60px;
  transform: perspective(320px) rotateX(62deg);
  transform-origin: top center;
}
```

Un cielo violeta, un sol rayado y un suelo de rejilla magenta inclinado en perspectiva. Coloca `.sun` y `.floor` dentro de `.scene`.

Para animarlo, mueve el `background-position` del suelo hacia abajo en bucle y la rejilla parecerá correr hacia ti. Respeta los ajustes de movimiento reducido al hacerlo; [degradados animados con CSS](https://gradiently.design/es/guide/css-animated-gradient) cubre el patrón.

## Fuentes y rotulación de los 80

La letra hacía gran parte del trabajo en los gráficos de la década. Los títulos de películas y los logos de producto usaban cursivas gruesas para dar velocidad, mayúsculas cromadas o extruidas para el drama y script de pincel suelto para todo lo que ocurría en una playa. Una sola palabra tratada así puede sostener todo un diseño.

- **Palo seco cursivas gruesas** sugieren movimiento, perfectas para todo lo deportivo o rápido.
- **Mayúsculas cromadas** funcionan para una o dos palabras como mucho; las líneas más largas pierden el reflejo.
- **Script de pincel** combina con la paleta de Miami, pequeño junto a una sans en negrita.
- **Fuentes de píxel y de rejilla** guiñan a los recreativos, pero se leen mal por debajo de un tamaño grande, así que resérvalas para títulos.

Para familias que probar, [fuentes retro](https://gradiently.design/es/guide/retro-fonts) enumera opciones por década.

## Cómo usar la estética de los 80 sin cliché

### Cliché

- Sol, rejilla, palmeras, cromo y VHS a la vez
- Resplandor de neón alrededor de cada línea de texto
- Una script, una cromada y una de píxel juntas
- Retro porque sí, sin relación con la marca

### Pensado

- Un ingrediente protagonista, como el sol cortado
- Neón en líneas y formas, texto nítido en zonas tranquilas
- Una tipografía de exhibición para el titular, una sans simple para los detalles
- Una razón: un producto retro, un aniversario, una noche de música

Si diseñas en Gradiently, sus tratamientos de rotulación Relieve y Estela dan a un titular la profundidad y la velocidad de un rótulo de película de los 80, y un Mark oscuro con luz violeta y magenta hace de cielo nocturno, manteniendo su zona más tranquila detrás de las palabras para que el texto siga nítido.

Un cartel vertical de noche de club que dice Noche synth sobre un fondo violeta oscuro y magenta

Un cartel de noche de los 80: fondo oscuro, un titular atrevido, detalles pequeños y simples.

Una miniatura horizontal de YouTube que dice De vuelta a 1986 con un número de episodio encima

Una miniatura de YouTube de 1280×720 con un título corto y grueso que se lee en tamaño pequeño.

El look va bien con noches de música, canales de videojuegos, lanzamientos de productos retro, aniversarios y todo lo que quiera un guiño de nostalgia. Si quieres la década siguiente, lee [estética de los 90](https://gradiently.design/es/guide/90s-aesthetic).

## FAQ

### ¿Qué es la estética de los 80?

Un estilo visual construido con colores neón sobre fondos oscuros, letras cromadas, degradados de atardecer, rejillas en perspectiva, pasteles de Miami y patrones Memphis.

### ¿Qué colores tiene una paleta de los 80?

Magenta neón, cian láser y amarillo sol sobre medianoche y violeta profundo para el look nocturno, o rosa flamenco, verde azulado piscina y melocotón para el look de Miami.

### ¿Cuál es la diferencia entre la estética de los 80 y el synthwave?

La estética de los 80 es el diseño propio de la década. El synthwave es un estilo musical y artístico posterior que la revive, y su arte dio forma al look de atardecer de neón y rejilla que mucha gente imagina hoy.

### ¿Cómo hago un atardecer de los 80 en CSS?

Usa un degradado lineal vertical del amarillo al naranja, al rosa y al violeta, y añade paradas duras o una máscara para abrir bandas oscuras en la mitad inferior.

### ¿Qué fuentes parecen de los 80?

Rotulación de exhibición cromada o extruida, script de pincel y palo seco cursivas gruesas. Usa una para el titular y una sans simple para todo lo demás.