# Gradientes retro: dos pores do sol dos anos 70 aos ecrãs dos anos 90

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

Riscas mostarda e ferrugem, néon sobre preto, verde-azulado e roxo e o azul das barras de título. Três décadas de gradientes retro com códigos, e as pequenas mudanças que os fazem parecer novos.

## The short version

- Um gradiente retro é uma transição de cor que lembra uma década específica, na maioria das vezes as riscas quentes dos anos 70, o néon dos anos 80 ou o verde-azulado e o roxo dos anos 90.
- Os gradientes dos anos 70 usam mostarda, laranja queimado, ferrugem e castanho chocolate, muitas vezes em riscas de arestas duras sobre creme.
- Os gradientes dos anos 80 dividem-se em dois visuais: rosa e ciano néon sobre preto, e pop pastel vivo em rosa, verde-azulado, amarelo e lilás.
- Os gradientes dos anos 90 incluem transições de verde-azulado a roxo, tons de pedra preciosa profundos e o gradiente de azul-marinho a azul das antigas barras de título.
- Para modernizar um gradiente retro, suaviza as arestas das riscas, baixa ligeiramente a saturação, mistura em OKLCH e junta grão fino.

Um **gradiente retro** é uma transição de cor que lembra de imediato uma década. Os anos 70 tinham riscas quentes de mostarda, laranja, ferrugem e castanho. Os anos 80 tinham rosa e ciano néon sobre preto, e pop pastel vivo. Os anos 90 tinham verde-azulado e roxo, tons de pedra preciosa profundos e as barras de azul-marinho a azul dos primeiros programas de computador. Abaixo estão uma paleta e um conjunto de gradientes para copiar de cada década, e depois um método para os modernizar, para parecerem uma referência e não um disfarce.

O retro funciona porque a cor guarda memória. As pessoas reconhecem uma década pela paleta muito antes de repararem no tipo de letra ou na composição, o que torna estes gradientes um atalho para um ambiente. Para a história mais longa de como os gradientes passaram pelo design, lê a [história dos gradientes](https://gradiently.design/pt-pt/guide/history-of-gradients).

## Gradientes dos anos 70: riscas de pôr do sol em laranja e castanho

A paleta dos anos 70 é quente e terrosa: dourado de colheita, laranja queimado, ferrugem e um castanho chocolate profundo, com o verde-abacate como a exceção e o creme como fundo. A sua assinatura é a risca: quatro ou cinco faixas de cor empilhadas como um pôr do sol, com arestas duras em vez de uma transição 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.

Riscas 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%)`

As paragens de cor duras fazem riscas: cada cor começa exatamente onde a anterior acaba. É o gradiente retro mais reconhecível de todos.

As transições suaves com as mesmas cores parecem mais delicadas e servem melhor fotografias ou texto longo do que as riscas. Mantém-nas na família quente e nunca ficam lamacentas, porque cada passo é um vizinho próximo do anterior. Para céus quentes mais suaves, vê os [gradientes de pôr do sol](https://gradiently.design/pt-pt/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 castanho: `radial-gradient(circle at 50% 30%, #c77d3a 0%, #6b3a1f 55%, #2e1a10 100%)`
- Gasosa de creme: `linear-gradient(180deg, #f2e2c4 0%, #f0c27a 55%, #e0a526 100%)`

Transições suaves dos anos 70: dourado a ferrugem, abacate a creme, um brilho castanho aveludado e um creme pálido a dourado.

## Gradientes dos anos 80: noites néon e pop pastel

Os anos 80 deram-nos dois visuais muito diferentes. Um é a noite néon: magenta e ciano a brilhar sobre preto, letras cromadas e grelhas, tirados dos filmes e dos jogos de arcada da época. O outro é o pop pastel, vivo e brincalhão: rosa, verde-azulado, amarelo-canário e lilás, muitas vezes com rabiscos pretos e formas geométricas. O nosso guia sobre as [cores vaporwave](https://gradiently.design/pt-pt/guide/vaporwave-colors) trata a fundo da noite néon, incluindo um pôr do sol e uma grelha em CSS.

- Pastilha elástica: #ff4f9a
- Verde-azulado de piscina: #00c2c7
- Canário: #ffe14d
- Lilás: #b18cff
- Preto de rabisco: #111111

Pop pastel dos anos 80. O preto faz parte da paleta: contorna as formas e impede as cores vivas de flutuarem.

- Noite néon: `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%)`
- Risca pop: `repeating-linear-gradient(45deg, #ffe14d 0 14px, #ff4f9a 14px 28px)`

Gradientes dos anos 80. O Cromado usa uma paragem dura entre 46 e 50% para imitar um horizonte refletido; a Risca pop é um gradiente repetido, por isso repete-se sem fim.

## 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 o lado, muitas vezes com roxo e magenta, em equipamentos desportivos, embalagens e nas primeiras páginas web. Os programas de computador trouxeram o gradiente de azul-marinho a azul vivo das barras de título das janelas, um dos primeiros gradientes que muitas pessoas viram num ecrã. Mais para o fim da década chegaram os plásticos verde-azulados translúcidos e, na impressão, tons de pedra preciosa mais profundos, como verde-caçador, bordeaux e ameixa.

- Azul de barra de título: `linear-gradient(90deg, #000080 0%, #1084d0 100%)`
- Verde-azulado a 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 bordeaux: `linear-gradient(160deg, #3d1f4f 0%, #800020 100%)`
- Verde-caçador: `linear-gradient(160deg, #2f4f3a 0%, #6b7d4f 100%)`

Gradientes dos anos 90, do ecrã (azul de barra de título) à prateleira (verde-azulado translúcido) e à página (tons de pedra preciosa).

A viragem 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-pt/guide/y2k-aesthetic), e combina naturalmente com os [gradientes holográficos](https://gradiently.design/pt-pt/guide/holographic-gradients).

## Gradientes retro por década, num relance

| Década | Cores principais | Estilo de gradiente | Ideal para |
| --- | --- | --- | --- |
| Anos 70 | Dourado, laranja, ferrugem, castanho, abacate | Riscas duras, transições suaves e quentes | Comida, bebida, lojas vintage, música |
| Anos 80 néon | Magenta, ciano, violeta sobre preto | Horizontes luminosos, cromado | Vida noturna, jogos, música synth |
| Anos 80 pop | Rosa, verde-azulado, canário, lilás, preto | Transições vivas, riscas, formas | Crianças, fitness, lançamentos divertidos |
| Anos 90 | Verde-azulado, roxo, azul-marinho, tons de pedra preciosa | Transições diagonais, azul de barra de título | Nostalgia tecnológica, streetwear, fanzines |

Escolhe a década pelo ambiente que queres, não só pela época em que o teu público cresceu.

## Como modernizar um gradiente retro

Um gradiente retro copiado à letra pode parecer um disfarce de carnaval. O retro moderno mantém a paleta que as pessoas reconhecem e muda o acabamento: arestas mais suaves, cor ligeiramente mais calma e uma textura que lembra impressão e não um ecrã plano.

1. **Mantém a paleta, suaviza as arestas** Dá a cada risca uma transição curta de 3 a 4% em vez de uma paragem dura. Continua a ler-se como riscas, mas parece impresso e não desenhado.
2. **Tira um pouco de saturação** As amostras originais eram muitas vezes vistas em papel ou em ecrãs baços. Atenuá-las ligeiramente nos ecrãs claros de hoje aproxima-as de como se sentiam.
3. **Mistura em OKLCH** Interpolar em OKLCH mantém o meio de cada transição luminoso em vez de acinzentado. Os [gradientes CSS em OKLCH](https://gradiently.design/pt-pt/guide/css-gradient-oklch) explicam como.
4. **Junta grão fino** O grão acrescenta a textura da película e do papel e disfarça as bandas. Os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) têm a receita.
5. **Usa tipografia moderna** Deixa a cor levar a década e escolhe um tipo de letra limpo e atual. Cor de época mais tipografia de época é onde se cai no 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 riscas duas vezes. A versão moderna usa cores ligeiramente mais calmas, transições de 4% entre faixas, interpolação OKLCH e uma camada de ruído SVG por cima.

### Datado

- Riscas duras e saturadas tiradas diretamente de um catálogo de cores
- Tipo de letra, composição e cor de época, tudo ao mesmo tempo
- Cor lisa com bandas visíveis
- Todos os clichés retro num só design

### Retro moderno

- Transições curtas entre faixas, cor ligeiramente mais calma
- Cor retro com tipografia limpa e atual
- Grão fino para um toque impresso
- Uma década, um motivo, muito espaço

Um cartaz A4 a anunciar saldos de verão de ganga, camurça e bombazina vintage

Um cartaz A4: o calor dos anos 70 com tipografia moderna e generosa.

Uma capa quadrada de playlist intitulada Canções da cassete

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

Se queres um visual retro que possas manter, descreve-o na [Forge](/forge) da Gradiently, por exemplo “riscas de pôr do sol dos anos 70 sobre creme, com grão”, e ela constrói um Mark a partir da frase. Para peças impressas, consulta [imprimir gradientes](https://gradiently.design/pt-pt/guide/print-gradients) antes de enviares os ficheiros, porque os laranjas e castanhos quentes podem mudar no papel.

## FAQ

### Que cores fazem um gradiente parecer retro?

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

### Como faço riscas dos anos 70 em CSS?

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

### Como evito que um gradiente retro pareça datado?

Mantém a paleta, mas suaviza as arestas das riscas, baixa ligeiramente a saturação, mistura em OKLCH, junta grão fino e combina-o com tipografia limpa e moderna.

### Qual é a diferença entre gradientes retro e vintage?

As palavras usam-se quase como sinónimos. Retro costuma significar um design novo que remete para uma década passada, enquanto vintage sugere algo que parece mesmo envelhecido, muitas vezes com mais textura e desbotado.

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

Escolhe pelo ambiente: anos 70 para calor e artesanato, anos 80 néon para vida noturna e energia, anos 80 pop para diversão e anos 90 para nostalgia digital e streetwear.