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

Uma textura de ruído em CSS é um salpico fino e aleatório sobreposto a uma cor ou gradiente para lhe dar grão. O CSS não tem uma função de ruído, por isso a fonte habitual é o SVG: o filtro feTurbulence gera o ruído, embrulhas-o num pequeno SVG, embebes isso como data URI e repetes em mosaico sobre o teu gradiente com pouca força. O resultado parece grão de película ou papel impresso, e corrige discretamente as faixas, os degraus visíveis que aparecem em gradientes grandes e suaves.

Porque é que o grão faz a cor parecer mais cara está explicado nos gradientes com grão. Este guia é a implementação.

O filtro de ruído SVG

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

Embeber o ruído como data URI

Um ficheiro à parte funciona, mas embeber poupa um pedido e mantém o efeito num só sítio. Num data URI, os carateres que significam algo nos URL têm de ser codificados: < passa a %3C, > passa a %3E, # passa a %23 e % passa a %25. Usa aspas simples dentro do SVG para não chocarem com as aspas duplas à volta do 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");
}

Sobrepor o ruído a um gradiente

Põe o ruído num pseudoelemento por cima do gradiente e controla-o com dois botões: um modo de mistura, que decide como o grão cinzento se mistura com a cor por baixo, e a opacidade, que decide a sua força. O soft-light mantém as cores limpas e é o mais suave; o overlay acrescenta mais contraste. O pointer-events: none impede a camada de bloquear 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 preferires um único elemento sem pseudoelemento, lista o ruído primeiro em background-image e define background-blend-mode: soft-light, normal. Perdes o botão de opacidade separado, por isso incorpora a força no SVG, por exemplo com opacity='0.5' no rect.

Quanto grão é suficiente

1. 1

   Começa ténue

   Começa com opacity: 0.3 e soft-light. Deves mal reparar nele à distância de um braço.

2. 2

   Verifica a zona mais escura

   As faixas vivem em esbatidos escuros e lentos. Sobe a opacidade até os degraus aí se dissolverem e pára.

3. 3

   Ajusta o grão ao tamanho

   Os heróis de ecrã inteiro aguentam um grão ligeiramente mais grosso, cerca de 0,6. Os cartões e botões pedem grão fino, cerca de 0,9.

4. 4

   Verifica num telemóvel e num monitor grande

   Um grão que parece certo num ecrã pode parecer pó noutro. Procura uma textura que se sinta em vez de se ver.

5. 5

   Verifica o texto por cima

   O grão não pode reduzir a legibilidade. Se texto pequeno assenta sobre a textura, baixa a força ou mantém o texto numa zona mais calma.

Desempenho do ruído em CSS

Um data URI em mosaico é barato: o navegador desenha o pequeno mosaico uma vez e repete-o, 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), que corre o filtro sobre cada píxel sempre que a área repinta. Se animares o grão, para um aspeto de película a cintilar, desloca a camada em mosaico com transform em alguns passos aos saltos em vez de regenerar o ruído, e desliga-a 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é-desenhado de cerca de 128 a 256 píxeis é uma fonte igualmente boa se já tiveres um. O grão é também um ingrediente de uma família mais ampla de superfícies, do papel ao vidro, tratada na textura de fundo. É também a camada final de um gradiente de malha em CSS.

O grão está incorporado em todos os Marks da Gradiently como uma definição de material, junto com a luz e o movimento, por isso os designs feitos com um levam textura sem código nenhum.

GR·W4AX·4M

Muslin Anvil

Ver este Mark