Resumindo
- Os pintores misturavam cores muito antes das telas, usando transições suaves de tom e distâncias azuladas e enevoadas para sugerir profundidade e luz.
- As primeiras telas de computador mostravam poucas cores para misturas suaves, então os gradientes apareciam como faixas visíveis ou padrões pontilhados.
- A interface Aqua da Apple, apresentada em 2000, fez dos gradientes brilhantes o visual marcante da década seguinte.
- O flat design deixou os gradientes de lado no começo dos anos 2010, de forma mais visível com o Windows 8 em 2012 e o iOS 7 em 2013.
- Os gradientes voltaram em meados dos anos 2010, com o ícone em gradiente do Instagram de 2016 como exemplo mais conhecido, e desde então evoluíram para visuais com mesh, grão e shaders.
Nesta página
A história dos gradientes no design é a história da tecnologia alcançando a pintura. Os artistas misturaram cores por séculos; a impressão aprendeu a imitá-las com pontos e tintas divididas; as primeiras telas mal conseguiam mostrá-las; as interfaces brilhantes dos anos 2000 abusaram delas; o flat design as removeu; e em meados dos anos 2010 elas voltaram e nunca mais foram embora. Os gradientes de cada época têm a cara que têm por causa das ferramentas daquele tempo.
Esta é uma história curta e prática, com o visual de cada época em forma de gradiente que você pode copiar. Para o básico, veja o que é um gradiente e os tipos de gradiente.
| Quando | O que aconteceu | O visual do gradiente |
|---|---|---|
| Renascimento | Sfumato e perspectiva aérea na pintura | Misturas tonais suaves, distância azulada e enevoada |
| 1704 | A Opticks de Newton organiza o espectro em círculo | O primeiro círculo cromático |
| Fim do século XIX | Impressão em meio-tom | Tom feito de pontos |
| Começo dos anos 1990 | Telas de 256 cores | Banding e pontilhado |
| 2000 a 2007 | Aqua, o Luna do Windows XP, Web 2.0, o Aero do Vista | Brilho, gel e vidro |
| 2012 a 2014 | Windows 8, iOS 7, Material Design | Cor chapada, misturas suaves |
| 2016 | O ícone em gradiente do Instagram | As misturas vivas voltam |
| Do fim dos anos 2010 em diante | Mesh, cônico, grão, shaders | Campos de luz suaves e movimento |
Gradientes antes das telas: pintura e impressão
Os pintores misturavam cores muito antes de alguém chamar isso de gradiente. Os artistas do Renascimento usavam o sfumato, transições suaves de tom sem contornos duros, técnica famosamente associada a Leonardo da Vinci. Os pintores de paisagem usavam a perspectiva aérea: as colinas distantes se desfazem numa névoa pálida e azulada e o céu clareia em direção ao horizonte, o gradiente mais antigo que a maioria de nós conhece.
linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)A ciência deu ordem às misturas de cor. Os experimentos de Isaac Newton com o prisma espalharam a luz branca num espectro contínuo, e a sua Opticks (1704) organizou essas cores num círculo, o ancestral de todo círculo cromático.
A impressão precisava imitar o tom contínuo. As retículas de meio-tom, desenvolvidas no fim do século XIX, transformaram os tons em pontos de tamanhos diferentes. Os impressores também usavam a técnica do arco-íris, o split fountain: duas ou mais tintas colocadas lado a lado na mesma máquina, misturando-se nos rolos, técnica ainda adorada na serigrafia e na tipografia. O aerógrafo deu aos ilustradores misturas suaves feitas à mão e moldou boa parte dos pôsteres e capas de discos dos anos 1970 e 1980.
As primeiras telas: banding, pontilhado e imagens repetidas
As primeiras telas de computador só mostravam um conjunto limitado de cores ao mesmo tempo, e as paletas de 256 cores comuns no começo dos anos 1990 não davam conta de uma mistura suave. Os gradientes se quebravam em listras visíveis, o chamado banding, ou eram pontilhados em padrões que o olho transformava numa mistura. As mesmas listras ainda aparecem quando um gradiente é longo e sutil; veja o banding em gradientes.
A web dos primeiros tempos não tinha nenhuma função de gradiente. Os designers criavam uma imagem de gradiente com um pixel de largura e mandavam o navegador repeti-la pela página. O SVG, uma Recomendação do W3C de 2001, já incluía gradientes lineares e radiais, mas os gradientes CSS vieram depois: o WebKit introduziu uma sintaxe com prefixo no fim dos anos 2000, a versão padrão foi escrita no CSS Images Level 3 e, no começo dos anos 2010, todos os grandes navegadores já desenhavam um gradiente sem imagem.
/* Early 2000s: a 1px-wide image, repeated across */
.header { background: #2b7ae0 url(header-bg.png) repeat-x; }
/* 2010s: the browser draws the gradient */
.header { background: linear-gradient(180deg, #6fb4f5, #2b7ae0); }
/* Now: the same blend, interpolated in OKLCH */
.header { background: linear-gradient(180deg in oklch, #6fb4f5, #2b7ae0); }Os brilhantes anos 2000: Aqua, Luna e Web 2.0
A Apple apresentou a interface Aqua do Mac OS X em 2000: botões translúcidos e brilhantes que pareciam gotas de gel colorido, com um reflexo claro no topo. O Windows XP veio em 2001 com o tema Luna, barras de título azuis sombreadas em gradiente e um botão Iniciar verde. Em meados da década, botões brilhantes, logos com reflexo e sombras suaves eram tão comuns nos sites que o visual virou sinônimo de Web 2.0.
O vidro Aero do Windows Vista, em 2007, foi ainda mais longe na translucidez. O problema foi a repetição: quando todo botão, selo e logo tinha o mesmo reflexo, o brilho deixou de indicar qualidade e passou a indicar template. O guia da estética Y2K cobre o visual mais amplo daqueles anos.
A virada do flat design: Metro e iOS 7
A linguagem de design Metro da Microsoft, primeiro no Windows Phone e depois em todo o Windows 8 em 2012, usava blocos de cor sólida, tipografia simples e nenhum brilho. O iOS 7 da Apple, em 2013, abandonou o couro costurado, o feltro e as texturas das versões anteriores por um design plano e leve. O Material Design do Google, lançado em 2014, manteve a cor chapada, mas usou sombras para mostrar camadas.
Anos 2000 brilhantes
- Um reflexo duro no meio
- Reflexos e chanfros
- Gradientes em todo controle, como decoração
- Imitações de materiais reais
Anos 2010 flat
- Cor sólida ou uma mistura suave de dois tons
- Sem chanfros, sombra mínima
- Cor usada para organizar, não para decorar
- Tipografia e espaço fazendo o trabalho
Os gradientes não desapareceram; mudaram de caráter. Muitos dos novos ícones de apps do iOS 7 usavam gradientes vivos e suaves de cima para baixo em vez de brilho, uma pista do que estava por vir.
O gradiente volta: Instagram e meados dos anos 2010
Em 2016, o Instagram trocou o ícone de câmera por um contorno simples sobre um gradiente do quente ao violeta, um dos gradientes de marca mais vistos da história. Na mesma época, apps e marcas começaram a combinar layouts planos com gradientes ousados e vivos, muitas vezes duas cores misturadas em ângulo. O flat design tinha tirado a decoração do caminho; os gradientes voltaram como cor e clima, não como brilho falso.
Esse sucesso teve um custo. Geradores e ferramentas de design traziam os mesmos pares, e no fim da década muitos feeds pareciam iguais, um problema tratado em por que todo feed parece igual.
Os gradientes hoje: mesh, grão, shaders e movimento
O capítulo mais recente é sobre riqueza e controle. Os gradientes mesh, com vários pontos de cor puxando em direções diferentes, saíram das ferramentas vetoriais especializadas para os apps de design do dia a dia. O conic-gradient(), definido no CSS Images Level 4, chegou aos navegadores a partir de 2018. Os shaders WebGL permitem que sites renderizem gradientes que se movem e reagem em tempo real, o grão voltou para dar à cor digital uma sensação física e, em 2025, a Apple lançou o Liquid Glass, um material translúcido em todas as suas plataformas.
radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)A ideia mais nova é que um gradiente pode ser uma identidade com dono, e não um estilo que qualquer um pode copiar. Os Marks do Gradiently são gradientes vivos: cores, materiais, luz, grão e movimento numa única receita, cada um com um código público e exatamente um dono por vez. Para saber para onde as coisas vão, veja as tendências de gradiente 2026.
GR·BBGB·1K
Lilac Pulse
Ver este MarkPerguntas frequentes
Quando os gradientes CSS surgiram?
O WebKit introduziu uma sintaxe de gradiente com prefixo no fim dos anos 2000, e os padrões linear-gradient() e radial-gradient() foram definidos no CSS Images Level 3. No começo dos anos 2010, todos os grandes navegadores já os suportavam sem imagem.
Por que os gradientes saíram de moda?
No fim dos anos 2000, os gradientes brilhantes estavam em quase todo botão e logo, então deixaram de parecer especiais. O flat design, liderado pelo Windows 8 em 2012 e pelo iOS 7 em 2013, os substituiu por cor sólida e tipografia simples.
Quando os gradientes voltaram à moda?
Em meados dos anos 2010. O ícone em gradiente do Instagram de 2016 é o exemplo mais conhecido, e as misturas vivas de duas cores se espalharam por apps, sites e marcas logo depois.
O que era a interface Aqua da Apple?
Aqua foi o visual que a Apple apresentou para o Mac OS X em 2000, com botões brilhantes que pareciam gel e superfícies translúcidas. Ele definiu o estilo de gradiente brilhante da década.
O que veio depois do flat design?
Layouts planos com cores ricas: primeiro gradientes vivos, depois gradientes mesh, grão, movimento feito com shaders e, mais recentemente, materiais translúcidos como o Liquid Glass da Apple.
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
