# Gradientes com grão: porque um pouco de ruído faz a cor parecer cara

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

Um gradiente limpo parece uma predefinição do ecrã. O mesmo gradiente com uma camada fina de grão parece uma impressão, um fotograma de filme ou uma parede pintada. Eis porquê, quanto juntar e como fazer.

## The short version

- Um gradiente com grão é uma transição de cor com uma camada fina de ruído aleatório por cima, para que a superfície pareça texturada em vez de perfeitamente lisa.
- O grão esconde o banding, porque a variação aleatória desfaz os degraus visíveis entre os tons limitados que um ecrã consegue mostrar.
- O grão faz a cor digital parecer física, lembrando película, impressão risográfica e papel mate.
- O grão deve sentir-se mais do que ver-se: começa subtil, verifica em tamanho real e acrescenta mais só onde a superfície é grande e calma.
- Em CSS, o método habitual é uma camada de ruído SVG feTurbulence colocada sobre o gradiente, com um modo de mistura e opacidade baixa.

Um **gradiente com grão** é um gradiente com uma camada fina de ruído aleatório por cima, para que a cor tenha uma textura visível em vez de uma superfície perfeitamente lisa e digital. Tornou-se popular por uma razão prática e outra visual: o grão esconde as riscas que as transições suaves muitas vezes mostram, e faz a cor num ecrã parecer algo impresso, filmado ou pintado. Bem feito, a maioria das pessoas nem repara no grão. Só acha que a cor fica melhor.

## Porque é que o grão melhora um gradiente

Há três razões, e somam-se.

- **Esconde o banding.** A maioria das imagens tem 256 tons por canal de cor. Uma transição suave numa área grande tem de saltar entre eles, e o olho distingue os saltos como riscas. O ruído aleatório espalha píxeis por tons vizinhos, e as margens entre os degraus desaparecem. É a mesma ideia do dithering. Vê [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding).
- **Dá tatilidade.** As coisas físicas nunca são perfeitamente lisas. A película tem grão, o papel tem textura e a tinta impressa assenta de forma irregular. Uma pequena quantidade de ruído empresta essas associações, e uma transição digital lisa começa a parecer um material.
- **Sobrevive melhor à compressão.** As plataformas sociais e as aplicações de mensagens voltam a comprimir as imagens. As transições suaves são exatamente o que a compressão forte achata em blocos, e um grão fino dá ao codificador detalhe a que se agarrar. Testa a exportação, porém: uma compressão muito forte também pode borrar o grão.

Uma publicação vertical intitulada Luz suave sobre um gradiente com um grão fino visível

Num Mark, o grão faz parte da receita, renderizado em direto juntamente com a cor.

Uma versão quadrada da mesma publicação com gradiente com grão

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

## Quanto grão juntar

O erro mais comum é exagerar. Grão a mais parece uma lente suja ou uma fotografia de telemóvel com pouca luz. A quantidade certa depende do tamanho da zona calma, de quão escuro é o gradiente e de onde vai ser visto. Trata os números abaixo como pontos de partida para uma camada de ruído no modo de mistura Overlay ou Soft Light, e depois avalia a olho em tamanho real.

| Uso | Opacidade inicial | Tamanho do grão |
| --- | --- | --- |
| Fundos de interface, por trás de texto corrido | Cerca de 5 a 10% | Fino |
| Publicações nas redes e secções principais | Cerca de 10 a 20% | Fino a médio |
| Cartazes, capas de álbuns, visuais editoriais fortes | Cerca de 20 a 35% | Médio a grosso |
| Gradientes escuros propensos a banding | O suficiente para esconder os degraus, não mais | Fino |

Pontos de partida, não regras. Verifica sempre o grão a 100% de zoom no dispositivo onde vai ser visto.

> **O teste de semicerrar os olhos** Aumenta para 100%, olha para o design e depois afasta-te. Se num design com muito texto consegues ver o grão a uma distância normal de leitura, corta-o para metade.

## Onde pôr o grão

O grão não tem de ser uniforme. Parece mais natural em áreas de cor grandes e calmas e em tons escuros, onde o grão de película é mais visível na vida real. Mantém-no mais leve por trás de texto pequeno, porque o ruído nas margens das letras torna-as moles. E mantém o logótipo e o texto acima da camada de grão, não por baixo, para ficarem nítidos.

### Evita

- Grão tão forte que parece sujidade ou pouca luz
- Grão sobre logótipos e texto pequeno
- Uma imagem pequena com grão ampliada, com o grão a transformar-se em manchas
- Ruído colorido, com salpicos de arco-íris, numa paleta calma

### Faz

- Grão que se sente mais do que se vê
- Texto e logótipos acima da camada de grão
- Grão renderizado ou em mosaico no tamanho final
- Ruído monocromático misturado com as cores de baixo

## Como juntar 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-lhe a cor para não criar salpicos, e um modo de mistura mistura-o com o gradiente de baixo. Valores de `baseFrequency` mais altos dão um grão mais fino; o `stitchTiles` faz o mosaico repetir-se 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 Overlay. O `z-index: -1` dentro de um elemento pai isolado mantém o grão acima do gradiente, mas abaixo de qualquer texto.

Se preferires uma imagem, uma pequena imagem de ruído em mosaico guardada em PNG funciona da mesma forma que o SVG. Mantém-na sem perdas: os mosaicos de ruído em JPEG apanham artefactos de compressão. Para mais padrões e truques de textura sem imagens, vê [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture).

## Como juntar grão nas ferramentas de design

1. **Constrói primeiro o gradiente** Acerta nas cores, nas paragens e na composição numa camada limpa. O grão não salva uma transição suja; vê [gradientes sujos](https://gradiently.design/pt-pt/guide/muddy-gradients).
2. **Acrescenta uma camada de ruído à parte** Usa o efeito de ruído da ferramenta ou uma textura de ruído numa camada própria acima do gradiente, para a poderes ajustar sem mexer na cor.
3. **Torna-o monocromático** Tira a saturação ao ruído para não acrescentar salpicos coloridos e depois põe a camada em Overlay ou Soft Light.
4. **Baixa a opacidade até desaparecer e depois recua um pouco** A quantidade certa costuma ficar logo acima do ponto em que deixas de reparar nela.
5. **Exporta no tamanho final, sem perdas se puderes** Ampliar uma imagem com grão aumenta o grão até ficar em manchas. Exporta em PNG no tamanho exato, ou em JPEG de alta qualidade para fotografias.

## Grão na impressão

O grão pensado para um ecrã de telemóvel pode comportar-se de outra forma no papel. A 300 dpi, um ruído muito fino pode desaparecer por completo, e um ruído grosso pode parecer um defeito de impressão. Para cartazes e folhetos, faz o grão na resolução de impressão e tira uma prova no papel real. [Imprimir gradientes](https://gradiently.design/pt-pt/guide/print-gradients) trata do resto do processo.

O grão é também um de vários materiais. O papel, o vidro e a seda mudam cada um o que um gradiente diz; a [textura em gradientes](https://gradiently.design/pt-pt/guide/gradient-texture) compara-os. Cada Mark traz a sua própria definição de grão ao lado das cores e dos materiais, por isso o equilíbrio já está definido quando começas a desenhar.

## FAQ

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

Um gradiente com grão é uma transição de cor com uma camada fina de ruído aleatório por cima, para parecer texturado como película ou impressão em vez de perfeitamente liso.

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

Normalmente, sim. O ruído aleatório desfaz as margens duras entre os tons limitados que um ecrã consegue mostrar, e as riscas deixam de ser visíveis.

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

Põe uma imagem de ruído SVG `feTurbulence` sobre o gradiente, tira-lhe a saturação, define `mix-blend-mode: overlay` e usa uma opacidade baixa.

### Quanto grão devo juntar?

Menos do que pensas. Começa baixo, verifica a 100% de zoom no dispositivo de destino e para logo depois de o grão deixar de ser óbvio.

### Porque é que o meu grão parece manchado?

Provavelmente a imagem foi ampliada depois de o grão ser acrescentado. Junta o grão no tamanho final de exportação, ou usa uma textura de ruído em mosaico.