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

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.
• 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.

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.

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.

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.

.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;
}

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.

Como juntar grão nas ferramentas de design

1. 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.

2. 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. 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. 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. 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 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 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.