Resumindo
- 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.
Nesta página
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.
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.
linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)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.
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 trata da noite neon a fundo, inclusive com um pôr do sol e uma grade 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 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.
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, e combina naturalmente com gradientes holográficos.
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 |
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 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 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.
/* 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
- 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: o calor dos anos 70 com tipografia moderna e generosa.
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 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 antes de enviar os arquivos, porque laranjas e marrons quentes podem mudar no papel.
Perguntas frequentes
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.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
