# Estética anos 80: néon, cromado e gradientes de pôr do sol

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

Tubos de néon, letras cromadas, um sol às riscas a afundar-se numa grelha luminosa. O visual dos anos 80 foi tantas vezes revivido que já tem um género musical próprio. Aqui fica como o construir, com códigos.

## The short version

- A estética anos 80 constrói-se com cores néon sobre fundos escuros, letras cromadas, gradientes de pôr do sol, grelhas em perspetiva e tons pastel de Miami.
- Grande parte do que hoje se chama estética anos 80 chega filtrada pela synthwave, um estilo musical e visual que reviveu o cinema, os arcades e os sintetizadores dos anos 80 a partir dos anos 2000.
- Um gradiente de pôr do sol que vai do amarelo ao violeta, passando por laranja e rosa, muitas vezes cortado em faixas horizontais, é o fundo mais reconhecível dos anos 80.
- As letras cromadas imitam metal polido com uma linha de horizonte nítida a meio das letras, onde o reflexo de um céu claro encontra o reflexo de um chão escuro.
- O néon funciona melhor em linhas e formas sobre fundo escuro; mantém o brilho longe do texto corrido para continuar legível.

A **estética anos 80** é néon sobre preto, letras cromadas, gradientes de pôr do sol cortados em faixas e uma grelha luminosa a correr até ao horizonte, com um lado mais suave de pastéis de Miami e padrões Memphis. A versão de hoje vem sobretudo da synthwave, um estilo que reviveu filmes, jogos de arcade e música de sintetizador dos anos 80 a partir dos anos 2000. Abaixo ficam os ingredientes principais, paletas com códigos, o CSS de um pôr do sol e de uma grelha, e como usar tudo isto sem cair no disfarce.

## Os ingredientes da estética anos 80

| Ingrediente | De onde vem | Para que serve |
| --- | --- | --- |
| Rosa e ciano néon | Letreiros, discotecas, máquinas de arcade | Linhas, formas e acentos sobre fundos escuros |
| Gradientes de pôr do sol | Capas de álbuns, cartazes de cinema, gráficos de férias | Fundos e um sol às riscas |
| Letras cromadas | Logótipos de filmes, carros e eletrónica | Títulos de uma ou duas palavras |
| Grelhas em perspetiva | Os primeiros gráficos de computador e os arcades | O chão de uma cena, um separador de secção |
| Pastéis de Miami | Hotéis Art Déco e a televisão da década | Versões mais claras e solarengas do visual |
| Formas Memphis | O coletivo de design de Milão do início dos anos 80 | Padrões divertidos e confetis |
| Textura VHS | O vídeo caseiro | Linhas de varrimento e grão sobre imagens |

Sete ingredientes. Dois ou três chegam para um design anos 80 convincente; os sete juntos dão uma festa temática.

## Estética anos 80 e synthwave

A synthwave, por vezes chamada outrun por causa do jogo de condução da Sega de 1986, é um género musical que cresceu online a partir de meados dos anos 2000 e vai buscar muito às bandas sonoras dos filmes dos anos 80. Os seus grafismos definiram o visual que muita gente imagina hoje: um céu violeta escuro, um sol às riscas, uma grelha magenta e letras cromadas. O filme *Drive*, de 2011, e a sua banda sonora ajudaram a levar o estilo para o grande público.

Por isso, quando um briefing diz anos 80, pergunta qual. A versão noturna da synthwave, a versão diurna de pastéis de Miami e a versão de padrões Memphis são três visuais diferentes. As [cores synthwave](https://gradiently.design/pt-pt/guide/synthwave-colors) e as [cores vaporwave](https://gradiently.design/pt-pt/guide/vaporwave-colors) aprofundam os dois revivalismos da internet, e o [design Memphis](https://gradiently.design/pt-pt/guide/memphis-design) trata do lado dos padrões.

## Paletas de cores dos anos 80

- Meia-noite: #0b0221
- Violeta profundo: #2b0a4a
- Magenta néon: #ff2fd0
- Ciano laser: #00f0ff
- Amarelo sol: #ffd319

Noite néon. Quase todo o espaço é meia-noite e violeta; os néons são linhas, o amarelo é o sol.

- Flamingo: #ff9ecd
- Piscina: #7fe7dc
- Pêssego: #ffd1a9
- Estuque: #fdf7f2
- Texto da noite: #2d1e4a

Miami de dia. Pastéis sobre um branco quente, com um violeta profundo para o texto continuar legível.

- Pôr do sol outrun: `linear-gradient(180deg, #ffd319 0%, #ff901f 30%, #ff2975 60%, #8c1eff 100%)`
- Sol às fatias: `linear-gradient(180deg, #ffd319 0% 45%, #1a0533 45% 48%, #ff901f 48% 62%, #1a0533 62% 66%, #ff2975 66% 80%, #1a0533 80% 85%, #c2185b 85% 100%)`
- Cromado: `linear-gradient(180deg, #f4f8ff 0%, #9fb3d1 49%, #1b2a4a 50%, #4a5b7c 62%, #e6edf7 100%)`
- Horizonte néon: `radial-gradient(circle at 50% 110%, #ff2fd0 0%, #6a0dad 35%, #0b0221 75%)`
- Pastel de Miami: `linear-gradient(135deg, #ff9ecd 0%, #ffd1a9 50%, #7fe7dc 100%)`
- Linhas laser: `repeating-linear-gradient(90deg, #0b0221 0 38px, #00f0ff 38px 40px)`

Seis gradientes anos 80 para copiar. O sol às fatias usa paragens secas para cortar faixas escuras na metade inferior, o sol clássico da synthwave.

O gradiente cromado é o que vale a pena estudar. O metal polido reflete um céu claro por cima de um chão escuro, por isso a cor começa clara, escurece até ao meio, passa a escuro numa linha de horizonte nítida e volta a clarear em direção à base. É essa linha dura que o faz parecer metal e não cinzento. Os [efeitos de texto cromado](https://gradiently.design/pt-pt/guide/chrome-effect) mostram como aplicá-lo a letras, e os [gradientes de pôr do sol](https://gradiently.design/pt-pt/guide/sunset-gradient) trazem versões mais suaves do céu.

## Constrói um pôr do sol e uma grelha anos 80 em 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;
}
```

Um céu violeta, um sol às riscas e um chão de grelha magenta inclinado em perspetiva. Coloca `.sun` e `.floor` dentro de `.scene`.

Para animar, desloca o `background-position` do chão para baixo em ciclo e a grelha parece vir ao teu encontro. Respeita as definições de movimento reduzido quando o fizeres; os [gradientes animados em CSS](https://gradiently.design/pt-pt/guide/css-animated-gradient) tratam do padrão.

## Fontes e letras dos anos 80

A tipografia fazia grande parte do trabalho nos gráficos da década. Os títulos de filmes e os logótipos de produtos usavam itálicos pesados para dar velocidade, maiúsculas cromadas ou extrudidas para dar drama, e manuscritos de pincel soltos para tudo o que se passava numa praia. Uma só palavra tratada assim pode carregar um design inteiro.

- **As sem serifas pesadas em itálico** sugerem movimento, ideais para tudo o que seja desportivo ou rápido.
- **As maiúsculas cromadas** funcionam para uma ou duas palavras, no máximo; linhas mais longas perdem o reflexo.
- **Os manuscritos de pincel** combinam com a paleta de Miami, em tamanho pequeno ao lado de uma sem serifas forte.
- **As fontes de píxeis e de grelha** piscam o olho aos arcades, mas leem-se mal abaixo de um tamanho grande, por isso guarda-as para títulos.

Para famílias a experimentar, as [fontes retro](https://gradiently.design/pt-pt/guide/retro-fonts) listam opções por década.

## Como usar a estética anos 80 sem cair no cliché

### Cliché

- Sol, grelha, palmeiras, cromado e VHS ao mesmo tempo
- Brilho néon à volta de cada linha de texto
- Uma fonte manuscrita, uma cromada e uma de píxeis juntas
- Retro por retro, sem ligação à marca

### Ponderado

- Um ingrediente protagonista, como o sol às fatias
- Néon em linhas e formas, letra nítida em zonas calmas
- Uma fonte de exibição para o título, uma sem serifas simples para os detalhes
- Uma razão: um produto retro, um aniversário, uma noite de música

Se desenhas no Gradiently, os tratamentos de letras Extrudir e Rasto dão a um título a profundidade e a velocidade de um genérico dos anos 80, e um Mark escuro com luz violeta e magenta faz o céu da noite para ele, mantendo a sua zona mais calma atrás das palavras para a letra continuar nítida.

Um cartaz vertical de uma noite de clube com o texto Noite synth sobre um fundo violeta escuro e magenta

Um cartaz de noite anos 80: fundo escuro, um título forte, detalhes pequenos e simples.

Uma miniatura horizontal de YouTube com o texto De volta a 1986 e um número de episódio por cima

Uma miniatura de YouTube de 1280×720 com um título curto e pesado que se lê em tamanho pequeno.

O visual assenta bem em noites de música, canais de jogos, lançamentos de produtos retro, aniversários e tudo o que queira uma piscadela de nostalgia. Se queres a década seguinte, lê a [estética anos 90](https://gradiently.design/pt-pt/guide/90s-aesthetic).

## FAQ

### O que é a estética anos 80?

Um estilo visual feito de cores néon sobre fundos escuros, letras cromadas, gradientes de pôr do sol, grelhas em perspetiva, pastéis de Miami e padrões Memphis.

### Que cores tem uma paleta dos anos 80?

Magenta néon, ciano laser e amarelo sol sobre meia-noite e violeta profundo para o visual noturno, ou rosa flamingo, verde piscina e pêssego para o visual de Miami.

### Qual é a diferença entre a estética anos 80 e a synthwave?

A estética anos 80 é o design da própria década. A synthwave é um estilo musical e artístico posterior que a revive, e os seus grafismos moldaram o visual de pôr do sol néon e grelha que muita gente imagina hoje.

### Como faço um pôr do sol anos 80 em CSS?

Usa um gradiente linear vertical do amarelo ao violeta, passando por laranja e rosa, e acrescenta paragens secas ou uma máscara para cortar faixas escuras na metade inferior.

### Que fontes parecem dos anos 80?

Letras de exibição cromadas ou extrudidas, manuscritos de pincel e sem serifas pesadas em itálico. Usa uma para o título e uma sem serifas simples para o resto.