A versão curta
- 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.
Nesta página
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.
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.
linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)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.
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 trata a fundo da noite néon, incluindo um pôr do sol e uma grelha em CSS.
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.
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, e combina naturalmente com os gradientes holográficos.
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 |
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 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 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.
/* 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%);
}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: o calor dos anos 70 com tipografia moderna e generosa.
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 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 antes de enviares os ficheiros, porque os laranjas e castanhos quentes podem mudar no papel.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
