# O que é um gradiente? Um guia simples sobre transições de cor

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

O gradiente é a ideia mais simples da cor e uma das mais fáceis de errar. Veja o que ele é, como é construído e por que voltou a aparecer em todas as telas.

## 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 chapada.
- Todo gradiente é definido pelas paradas de cor, pelas posições dessas paradas, por uma forma ou direção e pelo espaço de cor usado para misturar entre elas.
- Os principais tipos são linear, radial, cônico e mesh, e cada um leva a cor pelo espaço de um jeito diferente.
- Os gradientes voltaram à moda nas telas porque sugerem luz, profundidade e movimento de um jeito que a cor chapada não consegue.
- A maioria dos problemas de gradiente, como listras e meios acinzentados, vem da própria mistura e pode ser resolvida com paradas melhores, um espaço de cor melhor ou um pouco de grão.

**O que é um gradiente?** Em design, um gradiente (ou degradê) é uma mudança suave e gradual de uma cor para outra ao longo de uma superfície, como um azul profundo se derretendo em violeta em um pôster. Enquanto um preenchimento chapado pinta todos os pixels da mesma cor, um gradiente dá a cada ponto a sua própria cor, calculada a partir de algumas cores que você escolhe e de onde você as posiciona. Essa pequena mudança é o motivo de um gradiente parecer luz, ar ou profundidade, e também o motivo de ser tão fácil deixá-lo com cara de barato.

Esta página mostra as partes de que todo gradiente é feito, os principais tipos, onde os gradientes são usados e por que voltaram. Cada seção tem um link para um guia mais aprofundado quando você quiser os detalhes.

## As partes de um gradiente

Todo gradiente, seja desenhado em uma ferramenta de design, escrito em CSS ou renderizado por um motor de jogo, se resume aos mesmos poucos ingredientes. Quando você sabe nomeá-los, consegue descrever qualquer gradiente com precisão suficiente para outra pessoa reconstruí-lo.

| Parte | O que significa | Exemplo |
| --- | --- | --- |
| Paradas de cor | As cores pelas quais o gradiente passa | `#1e1b4b`, `#7c3aed`, `#f472b6` |
| Posições das paradas | Onde cada cor fica, de 0% a 100% | Violeta em 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 as paradas | sRGB, OKLab ou OKLCH |
| Textura | Qualquer coisa aplicada sobre a mistura | Grão, textura de papel, um brilho |

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

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

Três paradas em uma linha de 135 graus. O violeta fica em 55% em vez de no meio, então o canto superior esquerdo escuro ganha mais espaço.

As posições das paradas importam tanto quanto as cores. Mova a parada 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 quiser entender a direção em detalhe, leia [para que lado um gradiente deve ir](https://gradiently.design/pt-br/guide/gradient-angle).

## Gradientes suaves e em degraus

Um gradiente suave mistura as cores de forma contínua entre as paradas. Um gradiente em degraus, ou com paradas secas, coloca duas paradas na mesma posição, então a cor salta em vez de se misturar. Paradas secas criam listras, bandeiras, barras de progresso e pores do sol retrô; continuam sendo gradientes, só que com a mistura desligada naqueles pontos.

- Suave: verde-azulado a menta: `linear-gradient(90deg, #0f766e 0%, #5eead4 100%)`
- Em degraus: três faixas secas: `linear-gradient(90deg, #0f766e 0% 33%, #14b8a6 33% 66%, #5eead4 66% 100%)`
- Suave: pôr do sol de quatro paradas: `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 parecem gráficas e intencionais; as suaves parecem luz.

Os gradientes suaves têm uma fraqueza: as telas mostram um número limitado de tons, então uma transição muito delicada pode se partir em listras visíveis. Esse problema tem o seu próprio guia, [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding).

## Os principais tipos de gradiente

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

- **Linear:** a cor muda ao longo de uma linha reta, em um ângulo. É o burro de carga de fundos, botões e banners. Veja [gradientes lineares em CSS](https://gradiently.design/pt-br/guide/css-linear-gradient).
- **Radial:** a cor se espalha para fora a partir de um ponto, em círculo ou elipse, como um holofote ou um brilho. Veja [gradientes radiais](https://gradiently.design/pt-br/guide/radial-gradient).
- **Cônico:** a cor gira em torno de um ponto central, como o ponteiro de um relógio. Bom para círculos cromáticos, gráficos de pizza e reflexos. Veja [gradientes cônicos](https://gradiently.design/pt-br/guide/conic-gradient).
- **Mesh:** vários pontos de cor se misturam em duas dimensões ao mesmo tempo, então o resultado parece orgânico e pictórico. Veja [gradientes mesh](https://gradiently.design/pt-br/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. Gradientes mesh precisam de várias camadas ou de uma ferramenta própria.

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

Entre duas paradas, o software precisa inventar cada cor intermediária. Como ele faz isso depende do espaço de cor. A maioria das ferramentas e o CSS mais antigo misturam em sRGB, que combina valores de vermelho, verde e azul em linha reta. É rápido, mas pode passar por cinzas apagados, principalmente entre cores opostas como azul e amarelo.

Espaços de cor mais novos, como OKLab e OKLCH, são construídos em torno de como as pessoas percebem luminosidade e matiz, então as misturas ficam mais vivas e uniformes. No CSS você pode pedir por eles diretamente, e a diferença é fácil de ver. A história completa, e as soluções, estão em [gradientes lamacentos](https://gradiently.design/pt-br/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 os gradientes são usados

Os gradientes merecem seu lugar sempre que uma superfície precisa parecer iluminada ou viva sem acrescentar uma foto. Os usos mais comuns são fundos de posts para redes sociais e de sites, ícones de apps, botões e destaques em interfaces, embalagens, pôsteres e identidades de marca que usam uma transição do jeito que outras marcas usam uma cor. Para o lado da identidade, veja [branding com gradiente](https://gradiently.design/pt-br/guide/gradient-branding).

Um post vertical para redes sociais com um título curto sobre um fundo gradiente luminoso

Como fundo, um gradiente carrega o clima para que as palavras possam ser curtas.

Um slide widescreen com o título Notas do estúdio sobre o mesmo gradiente do post ao lado

Como identidade, o mesmo gradiente em um slide mantém todos os formatos reconhecíveis.

## Por que os gradientes voltaram

Os gradientes estavam em toda parte nas interfaces brilhantes dos anos 2000 e depois saíram de moda quando o flat design tomou conta das telas no começo dos anos 2010. Voltaram de um jeito mais discreto: menos chanfros e reflexos falsos, mais transições suaves de duas ou três cores. As telas de alta resolução ajudaram, porque cor suave fica melhor em telas densas, e marcas que buscavam algo mais distintivo que um único matiz chapado encontraram espaço nas transições. A visão mais ampla está em [a história dos gradientes](https://gradiently.design/pt-br/guide/history-of-gradients).

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

### Um gradiente com cara de genérico

- Duas cores tiradas direto de uma predefinição
- Misturado em sRGB com um meio cinza
- Perfeitamente limpo, então mostra faixas em telas escuras
- Esticado ou cortado para cada formato

### Um gradiente com cara de pensado

- Três a cinco cores relacionadas com um destaque
- Misturado em OKLCH ou com uma parada do meio escolhida
- Um pouco de grão para esconder listras e dar tato
- Renderizado de novo para cada tamanho

Se você prefere começar de uma transição pronta em vez de montar uma do zero, o [Mercado](/market) tem milhares de Marks: receitas completas de gradiente com cor, material, grão e luz, com as quais você pode criar de graça.

## 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, então cada ponto mostra uma cor um pouco diferente em vez de um único preenchimento chapado.

### O que são paradas de cor em um gradiente?

Paradas de cor são as cores pelas quais um gradiente passa, cada uma em uma posição entre 0% e 100%. O software mistura todas as cores entre elas.

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

Os principais tipos são linear, radial, cônico e mesh. O linear segue uma linha reta, o radial se espalha a partir de um ponto, o cônico gira em torno de um centro e o mesh mistura vários pontos em duas dimensões.

### Por que o meu gradiente fica cinza no meio?

Misturar cores opostas no espaço de cor sRGB passa pelo cinza. Acrescente uma parada do meio escolhida, use matizes mais próximos ou faça a mistura em OKLCH.

### Por que o meu gradiente tem listras?

As telas mostram um número limitado de tons por canal, então transições sutis mostram degraus visíveis. Acrescentar um pouco de grão ou ruído e evitar compressão pesada esconde os degraus.