Textura de ruído em CSS: grão em gradientes com SVG

Uma textura de ruído em CSS é um pontilhado fino e aleatório sobreposto a uma cor ou gradiente para dar grão a ele. O CSS não tem função de ruído, então a fonte padrão é o SVG: o filtro feTurbulence gera o ruído, você o envolve em um SVG minúsculo, embute isso como um data URI e o repete sobre o gradiente com baixa intensidade. O resultado lembra grão de filme ou papel impresso e corrige discretamente o banding, os degraus visíveis que aparecem em gradientes grandes e suaves.

Por que o grão faz a cor parecer mais cara é explicado em gradientes com grão. Este guia é a implementação.

O filtro SVG de ruído

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" />
</svg>

Embutindo o ruído como data URI

Um arquivo separado funciona, mas embutir poupa uma requisição e mantém o efeito em um só lugar. Em um data URI, os caracteres que significam algo em URLs precisam ser codificados: < vira %3C, > vira %3E, # vira %23 e % vira %25. Use aspas simples dentro do SVG para que não briguem com as aspas duplas em volta da URL.

:root {
  --noise: 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.8' 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");
}

Sobrepondo o ruído a um gradiente

Coloque o ruído em um pseudoelemento acima do gradiente e controle-o com dois botões: um modo de mesclagem, que decide como o grão cinza se mistura com a cor abaixo, e a opacidade, que decide a intensidade. O soft-light mantém as cores limpas e é o mais suave; o overlay acrescenta mais contraste. O pointer-events: none impede que a camada bloqueie os cliques.

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

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  mix-blend-mode: soft-light;
  opacity: 0.45;
  pointer-events: none;
}

Se você prefere um único elemento sem pseudoelemento, liste o ruído primeiro no background-image e defina background-blend-mode: soft-light, normal. Você perde o botão de opacidade separado, então embuta a intensidade no próprio SVG, por exemplo com opacity='0.5' no rect.

Quanto grão é suficiente

1. 1

   Comece leve

   Comece com opacity: 0.3 e soft-light. Você mal deve notar a uma distância de um braço.

2. 2

   Confira a área mais escura

   O banding vive em esmaecimentos escuros e lentos. Aumente a opacidade até os degraus ali se dissolverem e pare.

3. 3

   Combine o grão com o tamanho

   Heroes de tela cheia aguentam um grão um pouco mais grosso, em torno de 0.6. Cards e botões pedem grão fino, em torno de 0.9.

4. 4

   Confira em um celular e em um monitor grande

   Um grão que parece certo em uma tela pode parecer poeira em outra. Busque uma textura que você sinta, e não que veja.

5. 5

   Confira o texto por cima

   O grão não pode reduzir a legibilidade. Se um texto pequeno fica sobre a textura, diminua a intensidade ou mantenha o texto em uma área mais calma.

Desempenho do ruído em CSS

Um data URI em mosaico é barato: o navegador renderiza o pequeno mosaico uma vez e o repete, e uma camada estática é pintada uma vez. A versão cara é aplicar o filtro ao vivo a um elemento grande com filter: url(#noise), o que roda o filtro sobre cada pixel toda vez que a área é repintada. Se você animar o grão, para um visual de filme tremulante, desloque a camada em mosaico com transform em poucos passos bruscos em vez de regenerar o ruído, e desligue-o para movimento reduzido.

.grain {
  overflow: hidden;
}

.grain::after {
  inset: -50%;
  animation: flicker 0.6s steps(3) infinite;
}

@keyframes flicker {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
}

@media (prefers-reduced-motion: reduce) {
  .grain::after { animation: none; }
}

Um mosaico de ruído PNG ou WebP pré-renderizado de cerca de 128 a 256 pixels é uma fonte igualmente boa se você já tiver um. O grão também é um ingrediente de uma família mais ampla de superfícies, do papel ao vidro, tratada em textura de fundo. É também a camada final de um gradiente de malha em CSS.

O grão vem embutido em todo Mark do Gradiently como uma configuração de material, ao lado da luz e do movimento, então os designs feitos com um deles carregam textura sem nenhum código.

GR·W4AX·4M

Muslin Anvil

Ver este Mark