# Por que o seu gradiente tem listras e como corrigir o banding

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

Você fez um gradiente liso e ele voltou listrado. Isso é banding, e ele tem uma causa simples e um punhado de correções confiáveis. Aqui está a aritmética e depois as curas.

## The short version

- O banding em gradientes é o aparecimento de listras ou degraus visíveis no que deveria ser uma mistura lisa de cor.
- O banding acontece porque a maioria das imagens guarda só 256 níveis por canal de cor, então uma mistura sutil numa área grande tem de saltar entre poucos tons.
- O banding é pior em gradientes escuros, em gradientes sutis, em gradientes grandes e em imagens ou vídeos muito comprimidos.
- Acrescentar um grão fino ou um dither é a correção mais confiável, porque a variação aleatória esconde as bordas entre os degraus.
- Exportar em alta qualidade, evitar formatos de 256 cores como o GIF e ampliar a faixa de cor da mistura também reduzem o banding.

O **banding em gradientes** é quando um gradiente liso mostra listras ou degraus visíveis em vez de uma mistura contínua. Acontece porque as imagens digitais só guardam um número limitado de tons por cor, em geral 256 por canal, e quando um gradiente muda devagar por uma área larga, cada tom precisa cobrir uma faixa de pixels. O seu olho é muito bom em detectar bordas, então percebe essas faixas. A correção costuma ser acrescentar um grão fino, exportar com menos compressão ou dar à mistura mais cor para trabalhar.

## O que causa o banding em gradientes

A maioria das imagens usa 8 bits por canal: 256 valores possíveis para cada um de vermelho, verde e azul. Parece muito e, para um gradiente forte, é. O problema começa quando as cores de cada ponta são próximas.

Pegue um gradiente cinza de `#202020` a `#303030` numa tela de 1920 pixels de largura. Cada canal só vai de 32 a 48, ou seja, 16 degraus. Então o gradiente contém 16 tons distintos, cada um com cerca de 120 pixels de largura. Nenhum software consegue deixá-lo mais liso, porque não há tons intermediários para usar.

- Com banding: oito degraus visíveis: `linear-gradient(90deg, #1e1b4b 0% 12.5%, #211d52 12.5% 25%, #242059 25% 37.5%, #272260 37.5% 50%, #2a2467 50% 62.5%, #2d266e 62.5% 75%, #302875 75% 87.5%, #332a7c 87.5% 100%)`
- Pretendido: uma mistura lisa: `linear-gradient(90deg, #1e1b4b 0%, #332a7c 100%)`

A amostra de cima exagera o banding com oito degraus duros para você vê-lo em qualquer tela. O banding real parece as listras suaves que aparecem quando uma mistura escura e sutil como a segunda é esticada ou comprimida.

## Onde o banding mais aparece

| Situação | Por que faz banding |
| --- | --- |
| Gradientes escuros | As pessoas veem com facilidade pequenas diferenças entre tons escuros, e as misturas escuras muitas vezes cobrem poucos valores |
| Misturas sutis e de baixo contraste | Poucos degraus entre as cores das pontas, então cada faixa é larga |
| Áreas grandes | O mesmo número de degraus espalhado por mais pixels dá faixas mais largas |
| JPEG e uploads sociais | A compressão simplifica áreas lisas em blocos chapados |
| Vídeo | Os codecs de streaming e o vídeo de 8 bits achatam rampas suaves, sobretudo em cenas escuras |
| GIF e PNG-8 | Só 256 cores na imagem toda, para todos os canais juntos |

Um gradiente escuro, sutil e em tela cheia enviado como JPEG comprimido atinge quase todas as linhas de uma vez.

É por isso que os [fundos de gradiente escuros](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) e os [gradientes de aurora](https://gradiently.design/pt-br/guide/aurora-gradients) pedem mais cuidado. A beleza deles depende de rampas longas e suaves por tons escuros, que é exatamente a receita do banding.

## Como corrigir o banding em gradientes

1. **Acrescente grão ou dither** Uma camada fina de ruído aleatório espalha pixels entre tons vizinhos, então o olho não encontra mais as bordas. É a correção mais confiável e também deixa a superfície mais rica. Veja os [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients).
2. **Dê mais faixa à mistura** Diferenças maiores de luminosidade ou de matiz entre as cores das pontas significam mais degraus disponíveis e faixas mais estreitas. Um gradiente que também muda um pouco de matiz usa mais combinações de vermelho, verde e azul do que uma rampa só de luminosidade.
3. **Trabalhe em 16 bits onde puder** Os editores de imagem que aceitam 16 bits por canal mantêm muito mais níveis enquanto você trabalha. Converta para 8 bits só na exportação, com o dithering ligado.
4. **Exporte em alta qualidade** Use PNG para gráficos chapados ou JPEG em alta qualidade para imagens fotográficas. Evite GIF e PNG-8, que guardam só 256 cores no total.
5. **Exporte no tamanho final** Ampliar uma imagem de gradiente pequena estica as faixas dela. Renderize ou exporte no tamanho exato, ou maior, em vez de ampliar.

> **A sua tela pode ser parte do problema** Algumas telas mostram menos tons do que o arquivo contém, e os navegadores diferem em fazer ou não dither de gradientes. Confira o trabalho importante em mais de uma tela, incluindo um celular com brilho máximo.

## Corrigindo o banding em gradientes CSS

Os navegadores renderizam gradientes CSS ao vivo, então não há ajuste de exportação para mudar. Duas coisas ajudam. Primeiro, amplie a rampa ou acrescente uma mudança de matiz. Segundo, ponha uma camada sutil de ruído sobre o gradiente, que funciona exatamente como o grão numa imagem. A [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture) mostra jeitos leves de fazer essa camada sem arquivos de imagem grandes.

### Faz banding

- `linear-gradient(#0b0b12, #14141f)` numa tela cheia
- Um só matiz de quase preto a um pouco menos preto
- Sem textura sobre a superfície

### Se sustenta

- `linear-gradient(#0b0b12, #1e1b4b 60%, #312e81)` com mais faixa
- Uma rampa escura que também vai do cinza rumo ao índigo
- Uma camada fina de ruído em baixa opacidade por cima

## Corrigindo o banding em vídeos e uploads sociais

As plataformas sociais recomprimem o que você envia, e os codecs de vídeo são feitos para descartar exatamente o tipo de detalhe sutil que mantém os gradientes lisos. O grão ajuda duas vezes aqui: esconde os degraus e dá ao codificador detalhe de verdade para guardar. Envie no tamanho recomendado pela plataforma para que ele não seja redimensionado de novo e exporte o vídeo numa configuração generosa de qualidade. Se você codifica com ffmpeg, o x264 tem um ajuste feito para preservar o grão.

```bash
# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
  -c:v libx264 -preset slow -crf 16 -tune grain \
  -pix_fmt yuv420p -movflags +faststart \
  gradient-loop.mp4
```

Um `-crf` menor significa qualidade maior. O `-tune grain` diz ao codificador para manter o ruído em vez de suavizá-lo.

Os fundos em vídeo com loop são especialmente propensos a isso, porque costumam ser escuros e lentos. Os [vídeos em loop contínuo](https://gradiently.design/pt-br/guide/seamless-loop-video) tratam do resto da exportação.

## Prevenindo o banding desde o início

- Escolha gradientes com variação de luminosidade ou de matiz suficiente para o tamanho
- Planeje o grão desde o começo em vez de acrescentá-lo como socorro
- Mantenha os gradientes escuros um pouco elevados em vez de deslizar até o preto puro
- Confira no celular depois de enviar, não só no monitor em que você desenha

Todo Mark do Gradiently é renderizado ao vivo no tamanho em que você cria, com o grão como parte da receita, e os designs feitos com um Mark reservado exportam como PNG ou JPEG em até três vezes o tamanho do design, então um gradiente nunca precisa ser esticado a partir de uma imagem pequena.

## FAQ

### O que é banding em gradientes?

O banding em gradientes são listras ou degraus visíveis num gradiente que deveria parecer liso, causados por poucos tons disponíveis entre as cores dele.

### Por que os gradientes escuros fazem mais banding?

As misturas escuras costumam cobrir poucos valores por canal, e as pessoas notam com facilidade pequenas diferenças entre tons escuros, então cada degrau é largo e visível.

### Acrescentar ruído corrige o banding?

Em geral, sim. Um ruído fino ou dither espalha pixels entre tons vizinhos, então o olho não vê as bordas entre os degraus.

### Qual formato de arquivo é melhor para gradientes?

PNG para gráficos e JPEG de alta qualidade para imagens fotográficas. Evite GIF e PNG-8, que guardam só 256 cores.

### Por que o meu gradiente faz banding depois de enviado às redes sociais?

As plataformas recomprimem imagens e vídeos. Acrescente grão, envie no tamanho recomendado e exporte em alta qualidade para dar ao codificador detalhe para guardar.