# Breve história dos gradientes no design

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

As misturas de cor são mais antigas do que os ecrãs, passaram de moda quase de um dia para o outro e voltaram mais fortes. Eis como o gradiente foi dos céus pintados aos fundos vivos.

## The short version

- Os pintores misturavam cor muito antes dos ecrãs, usando transições suaves de tom e distâncias azuladas e enevoadas para sugerir profundidade e luz.
- Os primeiros ecrãs de computador mostravam poucas cores para misturas suaves, por isso 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 design plano afastou os gradientes no início da década de 2010, de forma mais visível com o Windows 8 em 2012 e o iOS 7 em 2013.
- Os gradientes regressaram a meio da década de 2010, com o ícone de gradiente do Instagram de 2016 como exemplo mais conhecido, e desde então evoluíram para a malha, o grão e visuais feitos com shaders.

A **história dos gradientes** no design é a história da tecnologia a alcançar a pintura. Os artistas misturaram cor durante séculos; a impressão aprendeu a imitá-la com pontos e tinta dividida; os primeiros ecrãs mal a mostravam; as interfaces brilhantes dos anos 2000 abusaram dela; o design plano eliminou-a; e a meio da década de 2010 voltou e nunca mais saiu. Os gradientes de cada época têm o aspeto que têm por causa das ferramentas do momento.

Esta é uma história breve e prática, com o visual de cada época como gradiente que podes copiar. Para o essencial, vê [o que é um gradiente](https://gradiently.design/pt-pt/guide/what-is-a-gradient) e os [tipos de gradientes](https://gradiently.design/pt-pt/guide/types-of-gradients).

| Quando | O que aconteceu | O visual do gradiente |
| --- | --- | --- |
| Renascimento | Sfumato e perspetiva atmosférica na pintura | Misturas suaves de tom, distância azulada e enevoada |
| 1704 | A *Opticks* de Newton organiza o espetro num círculo | A primeira roda de cores |
| Finais do século XIX | Impressão em meios-tons | Tom feito de pontos |
| Início dos anos 1990 | Ecrãs de 256 cores | Faixas 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 plana, misturas suaves |
| 2016 | O ícone de gradiente do Instagram | Regressam as misturas vivas |
| Finais dos anos 2010 em diante | Malha, cónico, grão, shaders | Campos de luz suaves e movimento |

A história do gradiente num relance.

## Gradientes antes dos ecrãs: pintura e impressão

Os pintores misturavam cor muito antes de alguém lhe chamar gradiente. Os artistas do Renascimento usavam o *sfumato*, transições suaves de tom sem contornos duros, uma técnica famosamente associada a Leonardo da Vinci. Os paisagistas usavam a perspetiva atmosférica: as colinas distantes esbatem-se numa neblina pálida e azulada e o céu clareia em direção ao horizonte, que é 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 em cima, a empalidecer numa neblina quente no horizonte: a mistura que os paisagistas usavam para dar profundidade ao espaço.

A ciência deu ordem às misturas de cor. As experiências de Isaac Newton com o prisma espalharam a luz branca num espetro contínuo, e a sua *Opticks* (1704) dispôs as cores num círculo, o antepassado de toda a [roda de cores](https://gradiently.design/pt-pt/guide/color-wheel).

A impressão tinha de imitar o tom contínuo. As tramas de meios-tons, desenvolvidas no fim do século XIX, transformavam tons em pontos de tamanhos diferentes. Os impressores também usavam o tinteiro dividido: duas ou mais tintas carregadas lado a lado numa só prensa, misturando-se nos rolos, uma técnica ainda apreciada na serigrafia e na tipografia. O aerógrafo deu aos ilustradores misturas suaves feitas à mão e moldou grande parte dos cartazes e capas de discos dos anos 1970 e 1980.

- Tinteiro dividido, de vermelho a azul: `linear-gradient(90deg, #d7263d 0%, #7a4f8f 50%, #1b98e0 100%)`
- Cartaz de pôr do sol feito com aerógrafo: `linear-gradient(180deg, #1b1340 0%, #7b2d6e 45%, #f06a3f 75%, #ffd27a 100%)`

Dois visuais pré-digitais. Um tinteiro dividido mistura tintas reais, por isso o meio é um roxo mais escuro; os céus de aerógrafo empilhavam faixas quentes sob um topo escuro.

## Os primeiros ecrãs: faixas, pontilhado e imagens em mosaico

Os primeiros ecrãs de computador só conseguiam mostrar um conjunto limitado de cores de cada vez, e as paletas de 256 cores comuns no início dos anos 1990 não conseguiam guardar uma mistura suave. Os gradientes partiam-se em riscas visíveis, chamadas banding, ou eram pontilhados em padrões de pontos que o olho fazia média até formar uma mistura. As mesmas riscas ainda aparecem quando um gradiente é longo e subtil; vê [banding em gradientes](https://gradiently.design/pt-pt/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 a uma mistura. Com apenas cinco cores, um gradiente suave torna-se uma escada.

A web dos inícios não tinha função de gradiente nenhuma. Os designers faziam uma imagem de gradiente com um píxel de largura e diziam ao navegador para a repetir pela página. O SVG, uma Recomendação do W3C de 2001, incluía gradientes lineares e radiais, mas os gradientes CSS vieram depois: o WebKit introduziu uma sintaxe com prefixo no final da década de 2000, a versão padrão foi escrita no [CSS Images Level 3](https://www.w3.org/TR/css-images-3/), e no início da década de 2010 todos os navegadores principais conseguiam desenhar 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 só linha faz tudo, com [mistura OKLCH mais suave](https://gradiently.design/pt-pt/guide/css-gradient-oklch) quando quiseres.

## Os anos 2000 brilhantes: 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 realce vivo na parte de cima. O Windows XP seguiu-se em 2001 com o tema Luna, barras de título azuis com sombreado em gradiente e um botão Iniciar verde. A meio da década, botões brilhantes, logótipos refletidos e sombras suaves eram tão comuns nos sites que o visual passou a ser sinónimo de Web 2.0.

- Botão de gel ao estilo Aqua: `linear-gradient(180deg, #d9efff 0%, #8cc8f7 48%, #3d8ee6 52%, #74c1ff 100%)`
- Barra de título ao 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 ao estilo Aero: `linear-gradient(180deg, #e8f3fb 0%, #bcd8ee 50%, #9cc3e3 51%, #d2e8f7 100%)`

O truque típico da época: uma mudança súbita de tom a meio, que o olho lê como um reflexo numa superfície brilhante.

O vidro Aero do Windows Vista, em 2007, foi mais longe na translucidez. O problema foi a repetição: quando todos os botões, emblemas e logótipos levavam o mesmo realce, o brilho deixou de sinalizar qualidade e passou a sinalizar um modelo. O guia sobre a [estética Y2K](https://gradiently.design/pt-pt/guide/y2k-aesthetic) trata do visual mais amplo desses anos.

## A viragem para o design plano: 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 mosaicos de cor sólida, tipografia simples e nenhum brilho. O iOS 7 da Apple, em 2013, abandonou o couro cosido, o feltro e as texturas das versões anteriores por um design plano e claro. O Material Design da Google, apresentado em 2014, manteve a cor plana mas usou a sombra para mostrar camadas.

### Anos 2000 brilhantes

- Um realce duro a meio
- Reflexos e chanfros
- Gradientes em todos os controlos, como decoração
- Imitações de materiais reais

### Anos 2010 planos

- 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 a fazer o trabalho

Os gradientes não desapareceram; mudaram de caráter. Muitos dos novos ícones de aplicações do iOS 7 usavam gradientes vivos e suaves, de cima para baixo, em vez de brilho, uma pista do que aí vinha.

## O gradiente regressa: o Instagram e meados da década de 2010

Em 2016 o Instagram substituiu o ícone da câmara por um simples contorno sobre um gradiente do quente ao violeta, um dos gradientes de marca mais visíveis alguma vez feitos. Por volta da mesma altura, aplicações e marcas começaram a juntar layouts planos a gradientes vivos e ousados, muitas vezes de duas cores misturadas na diagonal. O design plano tinha limpado a decoração; os gradientes voltaram como cor e ambiente, e não como falso brilho.

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

O visual do regresso: layouts planos, misturas vivas. Pares de duas cores como os dois últimos tornaram-se tão comuns que hoje parecem predefinições.

Esse sucesso teve um custo. Os geradores e as ferramentas de design traziam os mesmos pares e, no fim da década, muitos feeds pareciam iguais, um problema tratado em [porque todos os feeds parecem iguais](https://gradiently.design/pt-pt/guide/why-every-feed-looks-the-same).

## Gradientes hoje: malha, grão, shaders e movimento

O capítulo mais recente é sobre riqueza e controlo. Os gradientes de malha, com vários pontos de cor a puxar em direções diferentes, passaram de ferramentas vetoriais especializadas para aplicações de design do dia a dia. O `conic-gradient()`, definido no CSS Images Level 4, chegou aos navegadores em 2018. Os shaders WebGL permitem que os sites desenhem gradientes que se movem e respondem em tempo real, o grão regressou para fazer a cor digital parecer física e, em 2025, a Apple apresentou 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 riscas ou brilho: pêssego a arder em coral, violeta e noite. Vê [gradientes de malha](https://gradiently.design/pt-pt/guide/mesh-gradients) e [gradientes com shaders](https://gradiently.design/pt-pt/guide/shader-gradients) para saber como se fazem os campos de hoje.

A ideia mais recente é que um gradiente pode ser uma identidade com dono, e não um estilo que qualquer pessoa possa copiar. Os Marks da Gradiently são gradientes vivos: cores, materiais, luz, grão e movimento numa só receita, cada um com um código público e exatamente um dono de cada vez. Para saber para onde vamos a seguir, vê as [tendências de gradientes 2026](https://gradiently.design/pt-pt/guide/gradient-trends-2026).

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

## FAQ

### Quando foram introduzidos os gradientes CSS?

O WebKit introduziu uma sintaxe de gradiente com prefixo no final da década de 2000, e os `linear-gradient()` e `radial-gradient()` padrão foram definidos no CSS Images Level 3. No início da década de 2010, todos os navegadores principais os suportavam sem imagem.

### Porque é que os gradientes passaram de moda?

No fim da década de 2000, os gradientes brilhantes estavam em quase todos os botões e logótipos, por isso deixaram de parecer especiais. O design plano, liderado pelo Windows 8 em 2012 e pelo iOS 7 em 2013, substituiu-os por cor sólida e tipografia simples.

### Quando voltaram os gradientes à moda?

A meio da década de 2010. O ícone de gradiente do Instagram de 2016 é o exemplo mais conhecido, e as misturas vivas de duas cores espalharam-se logo depois por aplicações, sites e marcas.

### O que era a interface Aqua da Apple?

O Aqua foi o visual que a Apple apresentou para o Mac OS X em 2000, com botões brilhantes, semelhantes a gel, e superfícies translúcidas. Definiu o estilo de gradiente brilhante da década.

### O que veio depois do design plano?

Layouts planos com cor rica: primeiro gradientes vivos, depois gradientes de malha, grão, movimento com shaders e, mais recentemente, materiais translúcidos como o Liquid Glass da Apple.