# Gradientes com grão: por que um pouco de ruído deixa a cor mais cara

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

Um gradiente limpo parece um padrão de tela. O mesmo gradiente com uma camada fina de grão parece uma impressão, um fotograma de filme ou uma parede pintada. Veja por quê, quanto usar e como fazer.

## The short version

- Um gradiente com grão é uma mistura de cores com uma camada fina de ruído aleatório por cima, então a superfície parece texturizada e não perfeitamente lisa.
- O grão esconde o banding, porque a variação aleatória quebra os degraus visíveis entre os tons limitados que uma tela consegue mostrar.
- O grão faz a cor digital parecer física, lembrando filme, impressão em risografia e papel fosco.
- O grão deve ser mais sentido do que visto: comece sutil, confira em tamanho total e aumente só onde a superfície é grande e calma.
- Em CSS, o método usual é uma camada de ruído SVG feTurbulence posta sobre o gradiente com um modo de mistura e baixa opacidade.

Um **gradiente com grão** é um gradiente com uma camada fina de ruído aleatório por cima, então a cor tem uma textura visível em vez de uma superfície digital perfeitamente lisa. Ficou popular por um motivo prático e um visual: o grão esconde as listras que as misturas lisas costumam mostrar e faz a cor na tela parecer algo impresso, filmado ou pintado. Bem feito, a maioria das pessoas nem nota o grão. Só acha que a cor ficou melhor.

## Por que o grão deixa um gradiente melhor

São três razões, e elas se somam.

- **Esconde o banding.** A maioria das imagens tem 256 tons por canal de cor. Uma mistura suave por uma área grande precisa passar de um a outro, e o olho enxerga os degraus como listras. O ruído aleatório espalha os pixels por tons vizinhos, e as bordas entre os degraus desaparecem. É a mesma ideia do dithering. Veja [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding).
- **Dá tatilidade.** As coisas físicas nunca são perfeitamente lisas. O filme tem grão, o papel tem aspereza e a tinta impressa se assenta de modo irregular. Um pouco de ruído toma emprestadas essas associações, e uma mistura digital chapada passa a parecer um material.
- **Resiste melhor à compressão.** As plataformas sociais e os apps de mensagem recomprimem imagens. Misturas lisas são exatamente o que a compressão pesada achata em blocos, e um grão fino dá ao codificador um detalhe em que se apoiar. Teste a sua exportação, porém: uma compressão muito forte também pode borrar o grão.

Um post vertical intitulado Luz suave sobre um gradiente com um grão fino visível

Em um Mark, o grão faz parte da receita, renderizado ao vivo junto com a cor.

Uma versão quadrada do mesmo post de gradiente com grão

Em um tamanho quadrado, o Mark é renderizado de novo para o formato, então o grão continua fino em vez de ser ampliado.

## Quanto grão adicionar

O erro mais comum é usar demais. O grão pesado parece uma lente suja ou uma foto de celular com pouca luz. A quantidade certa depende do tamanho da área calma, de quão escuro é o gradiente e de onde ele será visto. Trate os números abaixo como pontos de partida para uma camada de ruído no modo de mistura Sobreposição ou Luz suave e depois julgue a olho, em tamanho total.

| Uso | Opacidade inicial | Tamanho do grão |
| --- | --- | --- |
| Fundos de interface, atrás de texto corrido | Cerca de 5 a 10% | Fino |
| Posts sociais e seções hero | Cerca de 10 a 20% | De fino a médio |
| Cartazes, capas de álbum, visuais editoriais ousados | Cerca de 20 a 35% | De médio a grosso |
| Gradientes escuros propensos a banding | O bastante para esconder os degraus, e não mais | Fino |

Pontos de partida, não regras. Confira sempre o grão em zoom de 100% no aparelho em que ele será visto.

> **O teste de apertar os olhos** Dê zoom de 100%, olhe o design e depois afaste-se. Se você vê o grão a uma distância normal de visualização em um design cheio de texto, reduza-o pela metade.

## Onde pôr o grão

O grão não precisa ser uniforme. Ele fica mais natural em áreas grandes e calmas de cor e em tons escuros, onde o grão de filme é mais visível na vida real. Mantenha-o mais leve atrás de texto pequeno, porque o ruído nas bordas das letras as deixa borradas. E deixe o logo e o texto acima da camada de grão, e não embaixo, para continuarem nítidos.

### Evite

- Grão tão forte que parece sujeira ou pouca luz
- Grão sobre logos e texto pequeno
- Uma pequena imagem com grão ampliada, e o grão vira manchas
- Ruído colorido, salpicado de arco-íris, em uma paleta calma

### Faça

- Um grão que você sente mais do que vê
- Texto e logos acima da camada de grão
- Grão renderizado ou repetido no tamanho final
- Ruído monocromático misturado às cores de baixo

## Como adicionar grão a um gradiente em CSS

O método mais leve é um filtro de ruído SVG usado como imagem de fundo. O `feTurbulence` gera ruído aleatório, o `feColorMatrix` tira a cor dele para não salpicar e um modo de mistura o combina com o gradiente de baixo. Valores maiores de `baseFrequency` dão um grão mais fino; o `stitchTiles` faz o bloco se repetir sem emendas.

```css
.grainy {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}

.grainy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.18;
}
```

Um gradiente com grão monocromático no modo de mistura Sobreposição. O `z-index: -1` dentro de um pai isolado mantém o grão acima do gradiente e abaixo de qualquer texto.

Se você prefere uma imagem, uma pequena imagem de ruído repetível salva em PNG funciona do mesmo jeito que o SVG. Mantenha-a sem perdas: blocos de ruído em JPEG pegam artefatos de compressão. Para mais padrões e truques de textura sem imagens, veja [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture).

## Como adicionar grão em ferramentas de design

1. **Monte primeiro o gradiente** Acerte as cores, as paradas e a composição em uma camada limpa. O grão não salva uma mistura suja; veja [gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients).
2. **Adicione uma camada de ruído separada** Use o efeito de ruído da ferramenta ou uma textura de ruído em uma camada própria acima do gradiente, para poder ajustá-la sem tocar na cor.
3. **Deixe-a monocromática** Dessature o ruído para não acrescentar pontinhos coloridos e depois ajuste a camada para Sobreposição ou Luz suave.
4. **Baixe a opacidade até o grão sumir e depois volte um pouco** A quantidade certa costuma ficar um pouco acima do ponto em que você deixa de notá-lo.
5. **Exporte no tamanho final, sem perdas se puder** Ampliar uma imagem com grão o transforma em manchas. Exporte em PNG no tamanho exato, ou em JPEG de alta qualidade para fotos.

## Grão na impressão

O grão pensado para a tela de um celular pode se comportar de outro jeito no papel. A 300 dpi, um ruído muito fino pode sumir por completo, e um ruído grosso pode parecer defeito de impressão. Para cartazes e panfletos, faça o grão na resolução de impressão e teste na tiragem real. [Como imprimir gradientes](https://gradiently.design/pt-br/guide/print-gradients) trata do resto do processo.

O grão é também um entre vários materiais. Papel, vidro e seda mudam o que um gradiente diz; [textura em gradiente](https://gradiently.design/pt-br/guide/gradient-texture) os compara. Todo Mark leva o seu próprio ajuste de grão junto com as cores e os materiais, então o equilíbrio já vem definido quando você começa a projetar.

## FAQ

### O que é um gradiente com grão?

Um gradiente com grão é uma mistura de cores com uma camada fina de ruído aleatório por cima, então parece texturizado como filme ou impressão em vez de perfeitamente liso.

### O grão corrige o banding em gradientes?

Em geral, sim. O ruído aleatório quebra as bordas duras entre os tons limitados que uma tela consegue mostrar, e as listras deixam de ser visíveis.

### Como adicionar grão a um gradiente em CSS?

Sobreponha ao gradiente uma imagem de ruído SVG `feTurbulence`, dessature-a, defina `mix-blend-mode: overlay` e use uma opacidade baixa.

### Quanto grão devo adicionar?

Menos do que você imagina. Comece baixo, confira em zoom de 100% no aparelho de destino e pare logo depois de o grão deixar de ser óbvio.

### Por que meu grão parece manchado?

A imagem provavelmente foi ampliada depois de o grão ser adicionado. Adicione o grão no tamanho final da exportação ou use uma textura de ruído repetível.