Resumindo
- 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.
Nesta página
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
De onde vem
Use para
De onde vem
Use para
De onde vem
Use para
De onde vem
Use para
De onde vem
Use para
De onde vem
Use para
De onde vem
Use para
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 e cores vaporwave aprofundam os dois revivals da internet, e design Memphis cobre o lado dos padrões.
Paletas de cores anos 80
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 mostra como aplicar nas letras, e gradientes de pôr do sol traz versões mais suaves do céu.
Como montar um pôr do sol anos 80 com grade em 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;
}.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 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ô 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 de festa anos 80: fundo escuro, um título forte, detalhes pequenos e simples.
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.
Perguntas frequentes
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.
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