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

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

Tubos de neon, letras cromadas, um sol listrado afundando numa grade luminosa. O visual dos anos 80 voltou tantas vezes que hoje tem até um gênero musical próprio. Veja como montar, com códigos.

## The short version

- A estética anos 80 é feita de cores neon sobre fundos escuros, letras cromadas, gradientes de pôr do sol, grades em perspectiva e tons pastel de Miami.
- Boa parte do que hoje se chama de estética anos 80 passa pelo synthwave, um estilo musical e visual que, a partir dos anos 2000, reviveu o cinema, os fliperamas e a cultura dos sintetizadores dos anos 1980.
- 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 anos 80 mais reconhecível.
- Letras cromadas imitam metal polido com uma linha de horizonte nítida no meio das letras, onde o reflexo claro do céu encontra o reflexo escuro do chão.
- O neon funciona melhor em linhas e formas sobre fundo escuro; mantenha o brilho longe do texto corrido para ele continuar legível.

A **estética anos 80** é neon sobre preto, letras cromadas, gradientes de pôr do sol cortados em faixas e uma grade luminosa correndo até o horizonte, com um lado mais suave de pastéis de Miami e padrões Memphis. Quase toda a versão atual vem do synthwave, um estilo que, a partir dos anos 2000, reviveu os filmes, os fliperamas e a música de sintetizador dos anos 1980. Abaixo estão os ingredientes principais, paletas com códigos, o CSS de um pôr do sol com grade e como usar tudo isso sem virar fantasia.

## Os ingredientes da estética anos 80

| Ingrediente | De onde vem | Use para |
| --- | --- | --- |
| Rosa e ciano neon | Letreiros, casas noturnas, fliperamas | Linhas, formas e detalhes sobre fundos escuros |
| Gradientes de pôr do sol | Capas de disco, cartazes de cinema, artes de férias | Fundos e um sol listrado |
| Letras cromadas | Logos de filmes, carros e eletrônicos | Títulos de uma ou duas palavras |
| Grades em perspectiva | Primeiros gráficos de computador e fliperamas | O chão de uma cena, um divisor de seção |
| Pastéis de Miami | Hotéis Art Déco e a televisão da década | Versões mais claras e ensolaradas do visual |
| Formas Memphis | O coletivo de design de Milão do início dos anos 80 | Padrões divertidos e confete |
| Textura de VHS | Vídeo doméstico | Linhas de varredura e grão sobre imagens |

Sete ingredientes. Dois ou três deles fazem um design anos 80 convincente; os sete juntos fazem uma festa à fantasia.

## Estética anos 80 e synthwave

O synthwave, às vezes chamado de outrun por causa do jogo de corrida de fliperama da Sega de 1986, é um gênero musical que cresceu na internet a partir de meados dos anos 2000 e bebe muito das trilhas de cinema dos anos 80. Suas capas definiram o visual que muita gente imagina hoje: um céu violeta escuro, um sol listrado, uma grade magenta e letras cromadas. O filme *Drive*, de 2011, e sua trilha ajudaram a levar o estilo ao grande público.

Então, quando um briefing pede anos 80, pergunte quais anos 80. A versão noturna synthwave, a versão diurna em pastel de Miami e a versão com padrões Memphis são três visuais diferentes. [Cores synthwave](https://gradiently.design/pt-br/guide/synthwave-colors) e [cores vaporwave](https://gradiently.design/pt-br/guide/vaporwave-colors) aprofundam os dois revivals da internet, e [design Memphis](https://gradiently.design/pt-br/guide/memphis-design) cobre o lado dos padrões.

## Paletas de cores anos 80

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

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

- Flamingo: #ff9ecd
- Piscina: #7fe7dc
- Pêssego: #ffd1a9
- Estuque: #fdf7f2
- Texto noturno: #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 em faixas: `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 neon: `radial-gradient(circle at 50% 110%, #ff2fd0 0%, #6a0dad 35%, #0b0221 75%)`
- Pastel Miami: `linear-gradient(135deg, #ff9ecd 0%, #ffd1a9 50%, #7fe7dc 100%)`
- Linhas de laser: `repeating-linear-gradient(90deg, #0b0221 0 38px, #00f0ff 38px 40px)`

Seis gradientes anos 80 para copiar. O sol em faixas usa paradas duras para cortar faixas escuras na metade de baixo, o clássico sol synthwave.

O gradiente cromado é o que vale estudar. Metal polido reflete um céu claro sobre um chão escuro, então a cor começa clara, escurece em direção ao meio, salta para o escuro numa linha de horizonte nítida e depois clareia de novo até a base. É essa linha dura que faz parecer metal em vez de cinza. [Efeito cromado](https://gradiently.design/pt-br/guide/chrome-effect) mostra como aplicar nas letras, e [gradientes de pôr do sol](https://gradiently.design/pt-br/guide/sunset-gradient) traz versões mais suaves do céu.

## Como montar um pôr do sol anos 80 com grade 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 listrado e um chão de grade magenta inclinado em perspectiva. Coloque `.sun` e `.floor` dentro de `.scene`.

Para animar, mova o `background-position` do chão para baixo em loop e a grade parece correr na sua direção. Respeite as configurações de movimento reduzido ao fazer isso; [gradientes animados em CSS](https://gradiently.design/pt-br/guide/css-animated-gradient) explica o padrão.

## Fontes e letras anos 80

A tipografia fazia boa parte do trabalho nos gráficos da década. Títulos de filmes e logos de produtos usavam itálicos pesados para dar velocidade, maiúsculas cromadas ou extrudadas para dar drama e scripts de pincel soltos para tudo que se passava na praia. Uma única palavra tratada assim pode sustentar um design inteiro.

- **Sem serifas itálicas pesadas** sugerem movimento, perfeitas para algo esportivo ou rápido.
- **Maiúsculas cromadas** funcionam em uma ou duas palavras no máximo; linhas mais longas perdem o reflexo.
- **Scripts de pincel** combinam com a paleta Miami, em tamanho pequeno ao lado de uma sem serifa forte.
- **Fontes pixel e de grade** remetem aos fliperamas, mas ficam pouco legíveis abaixo de um tamanho grande, então guarde para títulos.

Para famílias que vale testar, [fontes retrô](https://gradiently.design/pt-br/guide/retro-fonts) lista opções por década.

## Como usar a estética anos 80 sem clichê

### Clichê

- Sol, grade, palmeiras, cromado e VHS tudo junto
- Brilho neon em volta de cada linha de texto
- Uma fonte script, uma cromada e uma pixel ao mesmo tempo
- Retrô por retrô, sem ligação com a marca

### Pensado

- Um ingrediente principal, como o sol em faixas
- Neon em linhas e formas, texto nítido em áreas calmas
- Uma fonte de destaque no título, uma sem serifa simples nos detalhes
- Um motivo: um produto retrô, um aniversário, uma noite de música

Se você cria no Gradiently, os efeitos de lettering Extrusão e Rastro dão a um título a profundidade e a velocidade de uma abertura de filme dos anos 80, e um Mark escuro com luz violeta e magenta faz o céu noturno, mantendo sua região mais calma atrás das palavras para o texto continuar nítido.

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

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

Uma thumbnail horizontal do YouTube com o texto De volta a 1986 e o número do episódio acima

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

O visual combina com noites de música, canais de games, lançamentos de produtos retrô, aniversários e tudo que pede uma piscadela de nostalgia. Se você quer a década seguinte, leia [estética anos 90](https://gradiently.design/pt-br/guide/90s-aesthetic).

## FAQ

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

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

### Quais cores fazem parte de uma paleta anos 80?

Magenta neon, ciano laser e amarelo sol sobre meia-noite e violeta profundo no visual noturno, ou rosa flamingo, verde-água de piscina e pêssego no visual Miami.

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

A estética anos 80 é o design da própria década. O synthwave é um estilo musical e artístico posterior que a revive, e suas capas moldaram o visual de pôr do sol neon com grade que muita gente imagina hoje.

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

Use um gradiente linear vertical do amarelo ao violeta, passando por laranja e rosa, e adicione paradas duras ou uma máscara para cortar faixas escuras na metade de baixo.

### Quais fontes têm cara de anos 80?

Letras de destaque cromadas ou extrudadas, scripts de pincel e sem serifas itálicas pesadas. Use uma no título e uma sem serifa simples em todo o resto.