# Uma breve história dos gradientes no design

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

As misturas de cor são mais antigas que as telas, saíram de moda quase da noite para o dia e voltaram mais fortes. Veja como o gradiente viajou dos céus pintados aos fundos vivos.

## The short version

- 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.

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](https://gradiently.design/pt-br/guide/what-is-a-gradient) e os [tipos de gradiente](https://gradiently.design/pt-br/guide/types-of-gradients).

| 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 |

A história do gradiente num relance.

## 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.

Céu pintado, do zênite ao horizonte: `linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)`

Azul profundo no alto, clareando até uma névoa quente no horizonte: a mistura que os pintores de paisagem usavam para dar profundidade ao espaço.

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](https://gradiently.design/pt-br/guide/color-wheel).

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.

- Arco-íris, vermelho ao azul: `linear-gradient(90deg, #d7263d 0%, #7a4f8f 50%, #1b98e0 100%)`
- Pôster de pôr do sol no aerógrafo: `linear-gradient(180deg, #1b1340 0%, #7b2d6e 45%, #f06a3f 75%, #ffd27a 100%)`

Dois visuais pré-digitais. O arco-íris mistura tintas reais, então o meio vira um roxo mais escuro; os céus de aerógrafo empilhavam faixas quentes sob um topo escuro.

## 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](https://gradiently.design/pt-br/guide/gradient-banding).

- Mistura em faixas, cinco cores: `linear-gradient(90deg, #14145c 0% 20%, #26268a 20% 40%, #3a3ab4 40% 60%, #5454d6 60% 80%, #7676f0 80% 100%)`
- A mesma mistura, suave: `linear-gradient(90deg, #14145c 0%, #7676f0 100%)`

O que uma paleta limitada faz com uma mistura. Com só cinco cores disponíveis, um gradiente suave vira uma escada.

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](https://www.w3.org/TR/css-images-3/) e, no começo dos anos 2010, todos os grandes navegadores já desenhavam um gradiente sem imagem.

```css
/* 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); }
```

Três épocas do mesmo cabeçalho. Hoje uma linha resolve tudo, com [misturas mais suaves em OKLCH](https://gradiently.design/pt-br/guide/css-gradient-oklch) quando você quiser.

## 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.

- Botão de gel estilo Aqua: `linear-gradient(180deg, #d9efff 0%, #8cc8f7 48%, #3d8ee6 52%, #74c1ff 100%)`
- Barra de título estilo Luna: `linear-gradient(180deg, #3a8cf4 0%, #0a5fd8 12%, #0453d0 80%, #0a3fa8 100%)`
- Verde brilhante Web 2.0: `linear-gradient(180deg, #b6e67a 0%, #7cc242 50%, #5ea82a 51%, #8fd14f 100%)`
- Vidro estilo Aero: `linear-gradient(180deg, #e8f3fb 0%, #bcd8ee 50%, #9cc3e3 51%, #d2e8f7 100%)`

O truque característico da época: uma mudança brusca de tom no meio, que o olho lê como um reflexo numa superfície brilhante.

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](https://gradiently.design/pt-br/guide/y2k-aesthetic) 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.

- Verde vivo estilo iOS 7: `linear-gradient(180deg, #87fc70 0%, #0bd318 100%)`
- Amarelo, rosa e violeta: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%)`
- Violeta ao rosa, era das predefinições: `linear-gradient(135deg, #7f5af0 0%, #ff6ac1 100%)`
- Azul ao ciano, era das predefinições: `linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)`

O visual da volta: layouts planos, misturas vivas. Pares de duas cores como os dois últimos ficaram tão comuns que hoje parecem predefinições.

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](https://gradiently.design/pt-br/guide/why-every-feed-looks-the-same).

## 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.

Um campo de luz suave: `radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)`

Luz em vez de listras ou brilho: pêssego brilhando em coral, violeta e noite. Veja os [gradientes mesh](https://gradiently.design/pt-br/guide/mesh-gradients) e os [gradientes com shader](https://gradiently.design/pt-br/guide/shader-gradients) para saber como os campos de hoje são feitos.

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](https://gradiently.design/pt-br/guide/gradient-trends-2026).

Um Mark: uma identidade em gradiente com um código, um criador e um dono.

## FAQ

### 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.