# Gradientes retrô: do pôr do sol dos anos 70 às telas dos anos 90

[Canonical HTML page](https://gradiently.design/pt-br/guide/retro-gradients)

Listras de mostarda e ferrugem, neon sobre preto, verde-azulado com roxo e o azul das barras de título. Três décadas de gradientes retrô com códigos e os pequenos ajustes que os fazem parecer novos.

## The short version

- Um gradiente retrô é uma mistura de cores que lembra uma década específica, na maioria das vezes as listras quentes dos anos 70, o neon dos anos 80 ou o verde-azulado com roxo dos anos 90.
- Os gradientes dos anos 70 usam mostarda, laranja queimado, ferrugem e marrom chocolate, muitas vezes como listras de bordas duras sobre creme.
- Os gradientes dos anos 80 se dividem em dois visuais: rosa e ciano neon sobre preto, e um pop pastel vivo em rosa, verde-azulado, amarelo e lilás.
- Os gradientes dos anos 90 incluem misturas de verde-azulado ao roxo, tons profundos de pedras preciosas e o gradiente do azul-marinho ao azul das antigas barras de título do computador.
- Para modernizar um gradiente retrô, suavize as bordas das listras, reduza um pouco a saturação, misture em OKLCH e acrescente um grão fino.

Um **gradiente retrô** é uma mistura de cores que lembra uma década na hora. Os anos 70 tinham listras quentes de mostarda, laranja, ferrugem e marrom. Os anos 80 tinham rosa e ciano neon sobre preto, e um pop pastel vivo. Os anos 90 tinham verde-azulado e roxo, tons profundos de pedras preciosas e as barras do azul-marinho ao azul dos primeiros programas de computador. Abaixo há uma paleta e um conjunto de gradientes para copiar de cada década, e depois um método para modernizá-los, para que pareçam uma referência, e não uma fantasia.

O retrô funciona porque a cor carrega memória. As pessoas reconhecem uma década pela paleta muito antes de notar a fonte ou o layout, o que faz desses gradientes um atalho para um clima. Para a história completa de como os gradientes atravessaram o design, leia a [história dos gradientes](https://gradiently.design/pt-br/guide/history-of-gradients).

## Gradientes dos anos 70: listras de pôr do sol em laranja e marrom

A paleta dos anos 70 é quente e terrosa: dourado de colheita, laranja queimado, ferrugem e um marrom chocolate profundo, com o verde-abacate como exceção e o creme como fundo. A marca registrada é a listra: quatro ou cinco faixas de cor empilhadas como um pôr do sol, com bordas duras em vez de uma mistura suave.

- Creme: #f2e2c4
- Dourado de colheita: #e0a526
- Laranja queimado: #d9661f
- Ferrugem: #a8431f
- Chocolate: #4a2c1d
- Abacate: #7d7b35

Uma paleta dos anos 70. Tudo puxa para o quente, até o verde.

Listras de pôr do sol dos anos 70: `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`

Paradas de cor duras criam listras: cada cor começa exatamente onde a anterior termina. É o gradiente retrô mais reconhecível de todos.

Misturas suaves com as mesmas cores parecem mais delicadas e combinam melhor com fotos ou textos longos do que as listras. Mantenha-as na família quente e elas nunca ficam barrentas, porque cada passo é vizinho próximo do anterior. Para céus quentes mais suaves, veja [gradientes de pôr do sol](https://gradiently.design/pt-br/guide/sunset-gradient).

- Pôr do sol de colheita: `linear-gradient(180deg, #e0a526 0%, #d9661f 50%, #a8431f 100%)`
- Cozinha abacate: `linear-gradient(135deg, #7d7b35 0%, #b9a44c 50%, #e9d8a6 100%)`
- Veludo marrom: `radial-gradient(circle at 50% 30%, #c77d3a 0%, #6b3a1f 55%, #2e1a10 100%)`
- Creme de baunilha: `linear-gradient(180deg, #f2e2c4 0%, #f0c27a 55%, #e0a526 100%)`

Misturas suaves dos anos 70: dourado à ferrugem, abacate ao creme, um brilho marrom aveludado e um creme pálido ao dourado.

## Gradientes dos anos 80: noites neon e pop pastel

Os anos 80 nos deram dois visuais bem diferentes. Um é a noite neon: magenta e ciano brilhando sobre preto, letras cromadas e grades, vindos dos filmes e fliperamas da época. O outro é um pop pastel vivo e divertido: rosa, verde-azulado, amarelo-canário e lilás, muitas vezes com rabiscos pretos e formas geométricas. O nosso guia de [cores vaporwave](https://gradiently.design/pt-br/guide/vaporwave-colors) trata da noite neon a fundo, inclusive com um pôr do sol e uma grade em CSS.

- Chiclete: #ff4f9a
- Piscina: #00c2c7
- Canário: #ffe14d
- Lilás: #b18cff
- Preto de rabisco: #111111

O pop pastel dos anos 80. O preto faz parte da paleta: contorna as formas e impede que as cores vivas flutuem.

- Noite neon: `linear-gradient(180deg, #0b0221 0%, #2d0b59 60%, #ff2a6d 100%)`
- Cromado: `linear-gradient(180deg, #ffffff 0%, #9fb3c8 46%, #2b3a55 50%, #d6c0ff 100%)`
- Aeróbica: `linear-gradient(90deg, #ff4f9a 0%, #b18cff 50%, #00c2c7 100%)`
- Listra pop: `repeating-linear-gradient(45deg, #ffe14d 0 14px, #ff4f9a 14px 28px)`

Gradientes dos anos 80. O Cromado usa uma parada dura entre 46 e 50% para simular um horizonte refletido; a Listra pop é um gradiente repetido, então se repete infinitamente.

## Gradientes dos anos 90: verde-azulado, roxo e o azul das barras de título

A cor dos anos 90 é mais fria e mais digital. O verde-azulado estava em todo lugar, muitas vezes junto com roxo e magenta em uniformes esportivos, embalagens e nas primeiras páginas da web. Os programas de computador trouxeram o gradiente do azul-marinho ao azul vivo das barras de título das janelas, um dos primeiros gradientes que muita gente viu numa tela. Mais para o fim da década vieram os plásticos translúcidos verde-azulados e, no impresso, tons mais profundos de pedras preciosas, como verde-caçador, bordô e ameixa.

- Azul de barra de título: `linear-gradient(90deg, #000080 0%, #1084d0 100%)`
- Verde-azulado ao magenta: `linear-gradient(135deg, #0f7c80 0%, #5b2a86 60%, #c2185b 100%)`
- Verde-azulado translúcido: `linear-gradient(160deg, #b8f1f0 0%, #3cc6c4 50%, #1a7f8e 100%)`
- Ameixa e bordô: `linear-gradient(160deg, #3d1f4f 0%, #800020 100%)`
- Verde-caçador: `linear-gradient(160deg, #2f4f3a 0%, #6b7d4f 100%)`

Gradientes dos anos 90, da tela (azul de barra de título) à prateleira (verde-azulado translúcido) e à página (tons de pedras preciosas).

A virada do milênio é outra história: prateada, iridescente e cheia de bolhas. Esse visual tem o seu próprio guia, a [estética Y2K](https://gradiently.design/pt-br/guide/y2k-aesthetic), e combina naturalmente com [gradientes holográficos](https://gradiently.design/pt-br/guide/holographic-gradients).

## Gradientes retrô por década num relance

| Década | Cores principais | Estilo de gradiente | Ideal para |
| --- | --- | --- | --- |
| Anos 70 | Dourado, laranja, ferrugem, marrom, abacate | Listras duras, misturas quentes e suaves | Comida, bebida, brechós, música |
| Anos 80 neon | Magenta, ciano, violeta sobre preto | Horizontes brilhantes, cromado | Vida noturna, games, música synth |
| Anos 80 pop | Rosa, verde-azulado, canário, lilás, preto | Misturas vivas, listras, formas | Público infantil, fitness, lançamentos divertidos |
| Anos 90 | Verde-azulado, roxo, azul-marinho, tons de pedras preciosas | Misturas diagonais, azul de barra de título | Nostalgia tecnológica, streetwear, zines |

Escolha a década pelo clima que você quer, e não só pela época em que o seu público cresceu.

## Como modernizar um gradiente retrô

Um gradiente retrô copiado à risca pode parecer fantasia de festa à fantasia. O retrô moderno mantém a paleta que as pessoas reconhecem e muda o acabamento: bordas mais suaves, cor um pouco mais calma e uma textura que lembra impressão, e não uma tela chapada.

1. **Mantenha a paleta, suavize as bordas** Dê a cada listra uma mistura curta de 3 a 4% em vez de uma parada dura. Continua parecendo listra, mas impressa, e não desenhada.
2. **Tire um pouco de saturação** As amostras originais eram vistas muitas vezes no impresso ou em telas escuras. Diminuí-las um pouco nas telas claras de hoje se aproxima mais de como elas eram sentidas.
3. **Misture em OKLCH** Interpolar em OKLCH mantém o meio de cada mistura claro, e não acinzentado. O guia de [gradientes CSS em OKLCH](https://gradiently.design/pt-br/guide/css-gradient-oklch) explica como.
4. **Acrescente um grão fino** O grão traz a textura do filme e do papel e esconde as faixas. Os [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients) trazem a receita.
5. **Use tipografia moderna** Deixe a cor carregar a década e escolha uma fonte limpa e atual. Cor de época com tipografia de época é onde tudo vira pastiche.

```css
/* Original: hard seventies stripes */
.retro {
  background: linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%);
}

/* Modernised: softer colours, short blends, OKLCH, fine grain */
.retro-modern {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg in oklch, #f4e6cc 0 18%, #dba84a 22% 34%, #d27a45 38% 50%, #a95a3c 54% 66%, #5a3a2a 70%);
}
```

As mesmas listras duas vezes. A versão moderna usa cores um pouco mais calmas, misturas de 4% entre as faixas, interpolação OKLCH e uma camada de ruído em SVG por cima.

### Datado

- Listras duras e saturadas direto do catálogo de cores
- Fonte de época, layout de época e cor de época ao mesmo tempo
- Cor chapada com faixas visíveis
- Todos os clichês retrô num único design

### Retrô moderno

- Misturas curtas entre as faixas, cor um pouco mais calma
- Cor retrô com tipografia limpa e atual
- Grão fino para um toque de impresso
- Uma década, um motivo, bastante espaço

Um pôster A4 anunciando uma liquidação de verão de jeans, camurça e veludo cotelê vintage

Um pôster A4: o calor dos anos 70 com tipografia moderna e generosa.

Uma capa quadrada de playlist intitulada Músicas da fita cassete

Uma capa de playlist: uma única linha forte deixa a cor fazer a viagem no tempo.

Se você quer um visual retrô que possa guardar, descreva-o na [Forge](/forge) do Gradiently, por exemplo “listras de pôr do sol dos anos 70 sobre creme, com grão”, e ela cria um Mark a partir da frase. Para peças impressas, confira o guia de [como imprimir gradientes](https://gradiently.design/pt-br/guide/print-gradients) antes de enviar os arquivos, porque laranjas e marrons quentes podem mudar no papel.

## FAQ

### Que cores deixam um gradiente com cara de retrô?

Cores fortemente ligadas a uma década: mostarda, laranja, ferrugem e marrom para os anos 70, magenta e ciano neon ou pastéis vivos para os anos 80, e verde-azulado, roxo e azul-marinho para os anos 90.

### Como fazer listras dos anos 70 em CSS?

Use paradas de cor duras, em que cada cor começa exatamente onde a anterior termina, por exemplo `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`.

### Como evitar que um gradiente retrô pareça datado?

Mantenha a paleta, mas suavize as bordas das listras, reduza um pouco a saturação, misture em OKLCH, acrescente um grão fino e combine com uma tipografia limpa e moderna.

### Qual a diferença entre gradientes retrô e vintage?

As palavras são usadas quase como sinônimos. Retrô costuma significar um design novo que faz referência a uma década passada, enquanto vintage sugere algo que parece envelhecido de verdade, muitas vezes com mais textura e desbotamento.

### Qual década combina com a minha marca?

Escolha pelo clima: anos 70 para calor e artesanato, anos 80 neon para vida noturna e energia, anos 80 pop para diversão e anos 90 para nostalgia digital e streetwear.