# Nove erros de gradiente que fazem o design parecer barato

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

A maioria dos gradientes com cara de barato falha de uma entre nove maneiras previsíveis. Aqui está cada erro, o que o causa e a mudança específica que o corrige.

## The short version

- A maioria dos erros de design com gradiente vem de poucas causas: cores que passam pelo cinza, paradas demais, banding visível, pouco contraste no texto e presets intocados.
- Um gradiente entre dois matizes opostos costuma ficar cinza no meio em sRGB, e dá para corrigir com uma parada intermediária ou com interpolação em OKLCH.
- O banding aparece como listras visíveis em gradientes lentos, escuros ou sutis, e uma camada leve de grão ou dither em geral o esconde.
- O texto sobre um gradiente precisa ter o contraste conferido no pior ponto, e não no melhor, porque o fundo muda sob cada letra.
- Um gradiente parece caro quando tem uma estrutura clara, de três a cinco cores aparentadas, textura consistente e um motivo para existir.

Os **erros de design com gradiente** mais comuns são meios cinza e sujos, cores demais, banding visível, texto que desaparece, paradas secas, excesso de arco-íris, grão que não combina, presets intocados e um visual idêntico ao de todo mundo. Cada um tem uma causa específica e uma correção específica. Nenhum exige uma ferramenta nova, só um olhar mais atento ao que a mistura faz entre as paradas.

Este guia percorre os nove na ordem em que você costuma encontrá-los, da matemática da cor até a identidade. Se quiser o básico antes, leia [o que é um gradiente](https://gradiently.design/pt-br/guide/what-is-a-gradient).

## Erro 1: um meio cinza e sujo

Misture duas cores de lados opostos do círculo cromático, como azul e laranja, e o ponto do meio em sRGB é um marrom-acinzentado sem graça. O navegador faz a média dos canais de vermelho, verde e azul, e a média de dois complementares fica perto do neutro. O resultado parece uma mancha entre duas cores boas.

- Antes: azul direto para âmbar: `linear-gradient(90deg, #2563eb 0%, #f59e0b 100%)`
- Depois: por um meio magenta: `linear-gradient(90deg, #2563eb 0%, #db2777 50%, #f59e0b 100%)`
- Depois: interpolado em OKLCH: `linear-gradient(in oklch 90deg, #2563eb 0%, #f59e0b 100%)`

As mesmas duas pontas, três resultados. Uma parada intermediária ou a interpolação em OKLCH mantém o meio saturado.

Corrija passando a mistura por uma cor que fica entre as duas no círculo, ou interpolando em um espaço perceptual. [Gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients) trata dos dois métodos, e [OKLCH em CSS](https://gradiently.design/pt-br/guide/css-gradient-oklch) explica a sintaxe.

## Erro 2: cores demais

Cada cor que você adiciona é mais uma transição que o olho precisa ler. Passando de quatro ou cinco paradas, o gradiente deixa de parecer luz caindo sobre uma superfície e passa a parecer um gráfico de listras. Também fica impossível reproduzi-lo igual duas vezes.

- Sete paradas: agitado: `linear-gradient(135deg, #ef4444 0%, #f97316 16%, #eab308 32%, #22c55e 48%, #06b6d4 64%, #6366f1 80%, #d946ef 100%)`
- Três paradas aparentadas: calmo: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #f0abfc 100%)`

Três cores aparentadas dão mais profundidade do que sete sem relação.

Escolha uma família de matiz, adicione um parente mais claro e um mais escuro e permita no máximo um acento. A abordagem das [cores análogas](https://gradiently.design/pt-br/guide/analogous-colors) é o ponto de partida mais seguro.

## Erro 3: listras de banding

Banding é a escada de degraus visíveis que aparece em um gradiente lento, sobretudo um escuro. Um canal de 8 bits tem 256 níveis, e quando uma mistura percorre uma pequena distância de cor por uma área larga, cada nível vira uma faixa de vários pixels. A compressão JPEG pesada piora a situação.

```css
.hero {
  position: relative;
  background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Uma camada de ruído fino com cerca de 8% de opacidade quebra as faixas sem parecer suja.

O grão funciona porque espalha os pixels entre níveis vizinhos, e a borda entre duas faixas desaparece. Exporte em PNG ou em JPEG de alta qualidade. [Banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) detalha as configurações de exportação.

## Erro 4: texto que some no gradiente

Um gradiente muda sob cada letra. O texto branco pode ficar lindo na ponta escura de uma mistura e sumir na ponta clara da mesma linha. Quem projeta confere o título onde ele fica melhor, e o leitor o encontra onde fica pior.

Um post vertical com um título direto sobre um gradiente agitado, com algumas letras perdendo contraste

O fundo passa direto pelas palavras, então algumas letras ficam sobre uma cor clara.

O mesmo post vertical com o gradiente se acomodando em uma área calma e mais escura atrás do título

O mesmo design com a parte calma do campo movida para trás do texto.

Confira o contraste no ponto mais claro atrás de um texto claro, ou no mais escuro atrás de um texto escuro. A WCAG pede 4,5:1 para texto corrido e 3:1 para texto grande; o [contraste de cor](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica os números e o [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) trata da posição.

## Erro 5: paradas secas e acidentais

Quando duas paradas ficam a poucos por cento de distância, a mistura salta de uma cor para a outra e desenha uma linha que ninguém pediu. Paradas secas são úteis de propósito, para listras e gráficos, mas uma emenda acidental parece um erro.

- Paradas a 8%: emenda visível: `linear-gradient(180deg, #0f172a 0%, #0f172a 46%, #7c3aed 54%, #c4b5fd 100%)`
- Paradas espaçadas: queda suave de luz: `linear-gradient(180deg, #0f172a 0%, #3b1f7a 45%, #7c3aed 75%, #c4b5fd 100%)`

Deixe cada transição ocupar espaço de verdade no campo.

## Erro 6: excesso de arco-íris

Um espectro completo é a coisa mais barulhenta que um gradiente pode fazer, e raramente diz algo sobre a marca que o usa. Ele também carrega ao mesmo tempo as associações de todos os matizes. Se você quer um arco-íris, use um arco curto dele e controle a luminosidade. [Gradientes arco-íris](https://gradiently.design/pt-br/guide/rainbow-gradient) mostra versões de bom gosto.

## Erro 7: grão que não combina

### Evite

- Grão grosso no post, fino no story e nenhum nos slides
- Grão aplicado sobre textos e logos
- Grão tão pesado que parece uma lente suja
- Ampliar uma textura de grão até cada pontinho virar uma mancha

### Faça

- Um único tamanho e intensidade de grão para todos os formatos
- Grão só na camada de fundo
- Só o suficiente para quebrar o banding e dar textura
- Grão gerado no tamanho da exportação, e não esticado

A textura faz parte de um visual, então um grão inconsistente faz um conjunto de designs parecer vir de três lugares. [Gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients) mostra quanto usar.

## Erro 8: publicar o preset sem mexer

A maioria das ferramentas oferece as mesmas misturas de duas cores a 135 graus. Ficam boas, e por isso estão em toda parte. Um preset é um ponto de partida: mude uma cor, adicione uma terceira parada, ajuste a direção ao layout e acrescente um material. [Como usar um gerador de gradientes](https://gradiently.design/pt-br/guide/gradient-generator) acompanha essas edições.

## Erro 9: parecer com todo mundo

O último erro é o caro. Um gradiente bem feito, mas igual em espírito ao de todo concorrente, não ajuda em nada o reconhecimento. A correção é consistência mais algo difícil de copiar, como um material, um jeito de se mover ou um jeito de abrir espaço para as palavras. O [branding com gradiente](https://gradiently.design/pt-br/guide/gradient-branding) explica como ter um só seu.

| Erro | Correção rápida |
| --- | --- |
| Meio cinza | Parada intermediária ou interpolação em OKLCH |
| Cores demais | Uma família de matiz mais um acento |
| Banding | Grão fino, exportação em PNG ou de alta qualidade |
| Texto ilegível | Conferir o contraste no pior ponto |
| Paradas secas | Espaçar as paradas, a menos que a borda seja intencional |
| Excesso de arco-íris | Usar um arco curto do espectro |
| Grão que não combina | Uma receita de grão para todos os formatos |
| Preset intocado | Mudar cor, paradas, direção e textura |
| Igual a todo mundo | Adicionar um material e manter a consistência |

As nove correções em uma página.

## FAQ

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

Cores de lados opostos do círculo fazem uma média quase neutra em sRGB. Adicione uma parada intermediária em um matiz entre elas ou interpole em OKLCH.

### Como evitar o banding em um gradiente?

Adicione uma camada de ruído fino ou de grão com baixa opacidade, evite a compressão JPEG pesada e dê aos gradientes escuros uma faixa maior de luminosidade para percorrer.

### Quantas cores um gradiente deve ter?

Em geral de duas a quatro cores aparentadas, com no máximo um acento. Passando de cinco paradas, a maioria dos gradientes começa a parecer agitada.

### Como deixar o texto legível sobre um gradiente?

Ponha o texto sobre a parte mais calma do campo e confira o contraste onde o fundo tem luminosidade mais próxima da do texto. Mire em 4,5:1 para texto corrido e 3:1 para texto grande.

### Os presets de gradiente são ruins?

Não, mas são compartilhados por muita gente. Trate um preset como ponto de partida e mude as cores, as paradas, a direção e a textura antes de usá-lo.