# O que é um gradiente? Um guia simples sobre misturas de cor

[Canonical HTML page](https://gradiently.design/pt-pt/guide/what-is-a-gradient)

Um gradiente é a ideia mais simples da cor e uma das mais fáceis de errar. Eis o que é, como se constrói e porque voltou aos ecrãs em todo o lado.

## The short version

- Um gradiente é uma transição gradual de uma cor para outra ao longo de uma superfície, em vez de uma única cor lisa.
- Todos os gradientes são definidos pelas paragens de cor, pelas posições dessas paragens, por uma forma ou direção e pelo espaço de cor usado para misturar entre elas.
- Os principais tipos são o linear, o radial, o cónico e o de malha, e cada um leva a cor pelo espaço de uma forma diferente.
- Os gradientes voltaram à moda nos ecrãs porque sugerem luz, profundidade e movimento de uma forma que a cor lisa não consegue.
- A maioria dos problemas com gradientes, como as faixas e os meios cinzentos, vem da própria mistura e resolve-se com melhores paragens, um melhor espaço de cor ou um pouco de grão.

**O que é um gradiente?** Em design, um gradiente é uma mudança suave e gradual de uma cor para outra ao longo de uma superfície, como um azul profundo a derreter-se em violeta num cartaz. Onde um preenchimento liso pinta todos os píxeis da mesma cor, um gradiente dá a cada ponto a sua cor, calculada a partir de algumas cores que escolhes e do sítio onde as pões. Essa pequena mudança é a razão pela qual um gradiente pode parecer luz, ar ou profundidade, e também a razão pela qual é fácil fazê-lo parecer barato.

Esta página trata das partes de que todo o gradiente é feito, dos principais tipos, de onde se usam os gradientes e de porque voltaram. Cada secção tem uma ligação para um guia mais aprofundado quando quiseres o pormenor.

## As partes de um gradiente

Todos os gradientes, desenhados numa ferramenta de design, escritos em CSS ou renderizados por um motor de jogo, resumem-se aos mesmos poucos ingredientes. Quando os souberes nomear, consegues descrever qualquer gradiente com precisão suficiente para outra pessoa o reconstruir.

| Parte | O que significa | Exemplo |
| --- | --- | --- |
| Paragens de cor | As cores por onde o gradiente passa | `#1e1b4b`, `#7c3aed`, `#f472b6` |
| Posições das paragens | Onde fica cada cor, de 0% a 100% | Violeta a 55% em vez de 50% |
| Forma ou direção | O caminho que a cor percorre | 135 graus, ou um círculo a partir do centro |
| Interpolação | O espaço de cor usado para misturar entre paragens | sRGB, OKLab ou OKLCH |
| Textura | Tudo o que se põe por cima da mistura | Grão, textura de papel, um reflexo |

Cinco coisas descrevem por completo um gradiente. A maioria das pessoas só pensa na primeira.

Meia-noite, violeta, rosa: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)`

Três paragens numa linha de 135 graus. O violeta fica a 55% em vez de ao meio, por isso o canto superior esquerdo escuro ganha mais espaço.

As posições das paragens importam tanto como as cores. Move a paragem do meio de 50% para 65% e as mesmas três cores contam outra história: mais sombra, um nascer do sol mais tardio. Se queres perceber a direção em pormenor, lê [para que lado deve ir um gradiente](https://gradiently.design/pt-pt/guide/gradient-angle).

## Gradientes suaves e em degraus

Um gradiente suave mistura de forma contínua entre paragens. Um gradiente em degraus, ou de paragens nítidas, põe duas paragens na mesma posição, por isso a cor salta em vez de se misturar. As paragens nítidas fazem riscas, bandeiras, barras de progresso e pores do sol retro; continuam a ser gradientes, só com a mistura desligada nesses pontos.

- Suave: verde-azulado a menta: `linear-gradient(90deg, #0f766e 0%, #5eead4 100%)`
- Em degraus: três faixas nítidas: `linear-gradient(90deg, #0f766e 0% 33%, #14b8a6 33% 66%, #5eead4 66% 100%)`
- Suave: pôr do sol de quatro paragens: `linear-gradient(180deg, #fde68a 0%, #fb923c 45%, #db2777 70%, #312e81 100%)`
- Em degraus: o mesmo pôr do sol em faixas: `linear-gradient(180deg, #fde68a 0% 25%, #fb923c 25% 50%, #db2777 50% 75%, #312e81 75% 100%)`

As mesmas cores, misturadas e em degraus. As versões em degraus leem-se como gráficas e intencionais; as suaves leem-se como luz.

Os gradientes suaves têm um ponto fraco: os ecrãs mostram um número limitado de tons, por isso uma mistura muito suave pode partir-se em riscas visíveis. Esse problema tem o seu próprio guia, [faixas nos gradientes](https://gradiently.design/pt-pt/guide/gradient-banding).

## Os principais tipos de gradiente

O tipo é a forma do caminho que a cor percorre. Quatro tipos cobrem quase tudo o que vais encontrar, e [tipos de gradientes](https://gradiently.design/pt-pt/guide/types-of-gradients) mostra cada um com código ao vivo.

- **Linear:** a cor muda ao longo de uma linha reta num ângulo. O cavalo de batalha para fundos, botões e banners. Vê [gradientes lineares em CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient).
- **Radial:** a cor espalha-se para fora a partir de um ponto, num círculo ou numa elipse, como um foco de luz ou um brilho. Vê [gradientes radiais](https://gradiently.design/pt-pt/guide/radial-gradient).
- **Cónico:** a cor roda à volta de um ponto central, como o ponteiro de um relógio. Bom para círculos cromáticos, gráficos circulares e reflexos. Vê [gradientes cónicos](https://gradiently.design/pt-pt/guide/conic-gradient).
- **De malha:** vários pontos de cor misturam-se em duas dimensões ao mesmo tempo, por isso o resultado parece orgânico e pictórico. Vê [gradientes de malha](https://gradiently.design/pt-pt/guide/mesh-gradients).

- Linear: `linear-gradient(135deg, #0c4a6e 0%, #38bdf8 100%)`
- Radial: `radial-gradient(circle at 30% 35%, #fef3c7 0%, #f59e0b 35%, #7c2d12 100%)`
- Cónico: `conic-gradient(from 90deg at 50% 50%, #f472b6, #a78bfa, #38bdf8, #34d399, #fbbf24, #f472b6)`

Linear, radial e cónico, cada um como um único valor CSS. Os gradientes de malha precisam de várias camadas ou de uma ferramenta própria.

## Como as cores se misturam: a parte que as pessoas saltam

Entre duas paragens, o software tem de inventar todas as cores intermédias. A forma como o faz depende do espaço de cor. A maioria das ferramentas e o CSS mais antigo misturam em sRGB, que combina os valores de vermelho, verde e azul em linha reta. É rápido, mas pode passar por cinzentos baços, sobretudo entre cores opostas como o azul e o amarelo.

Espaços de cor mais recentes, como o OKLab e o OKLCH, são construídos à volta da forma como as pessoas percebem a luminosidade e o tom, por isso as misturas ficam mais vivas e uniformes. Em CSS podes pedi-los diretamente, e a diferença vê-se com facilidade. A história completa, e as soluções, estão em [gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients).

```css
.sky {
  /* default: blended in sRGB, passes through grey */
  background: linear-gradient(90deg, #0000ff, #ffff00);
}

.sky-better {
  /* blended in OKLCH, travels round the hue wheel through teal */
  background: linear-gradient(90deg in oklch, #0000ff, #ffff00);
}
```

Uma expressão a mais muda o espaço de cor. Suportado nas versões atuais dos principais navegadores.

## Onde se usam os gradientes

Os gradientes merecem o lugar sempre que uma superfície precisa de parecer iluminada ou viva sem acrescentar uma fotografia. Os trabalhos mais comuns são fundos para publicações e sites, ícones de aplicações, botões e destaques em interfaces, embalagens, cartazes e identidades de marca que usam uma mistura como outras marcas usam uma só cor. Para o lado da identidade, vê [branding com gradientes](https://gradiently.design/pt-pt/guide/gradient-branding).

Uma publicação vertical com um título curto sobre um fundo com gradiente luminoso

Como fundo, um gradiente transporta o ambiente para que as palavras possam ficar curtas.

Um diapositivo panorâmico com o título Notas do estúdio sobre o mesmo gradiente da publicação ao lado

Como identidade, o mesmo gradiente num diapositivo mantém todos os formatos reconhecíveis.

## Porque é que os gradientes voltaram

Os gradientes estavam em todo o lado nas interfaces brilhantes dos anos 2000 e depois caíram em desuso quando o design plano tomou conta dos ecrãs no início da década de 2010. Voltaram numa forma mais discreta: menos biséis e reflexos falsos, mais misturas suaves de duas ou três cores. Os ecrãs de alta resolução ajudaram, porque a cor suave fica melhor em ecrãs densos, e as marcas à procura de algo mais distintivo do que um só tom liso encontraram espaço nas misturas. A visão longa está em [a história dos gradientes](https://gradiently.design/pt-pt/guide/history-of-gradients).

Hoje, os gradientes mais interessantes vão além da cor. O grão, a textura e o movimento lento fazem uma mistura parecer um material e não uma predefinição, que é o tema de [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) e [textura de gradiente](https://gradiently.design/pt-pt/guide/gradient-texture).

### Um gradiente que parece genérico

- Duas cores tiradas diretamente de uma predefinição
- Misturado em sRGB com um meio cinzento
- Perfeitamente limpo, por isso forma faixas em ecrãs escuros
- Esticado ou recortado para todos os formatos

### Um gradiente que parece pensado

- Três a cinco cores relacionadas com um acento
- Misturado em OKLCH ou com uma paragem intermédia escolhida
- Um pouco de grão para esconder as riscas e dar tato
- Renderizado de novo para cada tamanho

Se preferires partir de uma mistura acabada em vez de a construíres do zero, o [Mercado](/market) tem milhares de Marks: receitas completas de gradiente com cor, material, grão e luz com que podes criar gratuitamente.

## FAQ

### O que é um gradiente em palavras simples?

Um gradiente é uma mudança gradual de uma cor para outra ao longo de uma superfície, por isso cada ponto mostra uma cor ligeiramente diferente em vez de um só preenchimento liso.

### O que são as paragens de cor num gradiente?

As paragens de cor são as cores por onde um gradiente passa, cada uma numa posição entre 0% e 100%. O software mistura todas as cores intermédias.

### Quais são os principais tipos de gradiente?

Os principais tipos são o linear, o radial, o cónico e o de malha. O linear segue uma linha reta, o radial espalha-se a partir de um ponto, o cónico roda à volta de um centro e o de malha mistura vários pontos em duas dimensões.

### Porque é que o meu gradiente fica cinzento no meio?

Misturar cores opostas no espaço de cor sRGB passa pelo cinzento. Junta uma paragem intermédia escolhida, usa tons mais próximos ou mistura em OKLCH.

### Porque é que o meu gradiente tem riscas?

Os ecrãs mostram um número limitado de tons por canal, por isso as misturas subtis avançam em degraus visíveis. Juntar um pouco de grão ou ruído e evitar compressão forte esconde os degraus.