Texture di rumore in CSS: aggiungere grana ai gradienti con SVG

Una texture di rumore in CSS è una fine granulosità casuale sovrapposta a un colore o a un gradiente per dargli grana. Il CSS non ha una funzione di rumore, quindi la fonte standard è l’SVG: il filtro feTurbulence genera il rumore, lo racchiudi in un minuscolo SVG, lo incorpori come data URI e lo ripeti sopra il gradiente a bassa intensità. Il risultato sembra grana da pellicola o carta stampata, e risolve con discrezione il banding, il visibile effetto a gradini che compare nei gradienti ampi e morbidi.

Perché la grana fa sembrare il colore più prezioso è spiegato nei gradienti con grana. Questa guida è l’implementazione.

Il filtro di rumore 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>

Incorporare il rumore come data URI

Un file separato funziona, ma incorporarlo risparmia una richiesta e tiene l’effetto in un solo posto. In un data URI, i caratteri che hanno un significato negli URL vanno codificati: < diventa %3C, > diventa %3E, # diventa %23 e % diventa %25. Usa apici singoli dentro l’SVG così non si scontrano con le virgolette doppie attorno all’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");
}

Sovrapporre il rumore a un gradiente

Metti il rumore su uno pseudo-elemento sopra il gradiente, poi controllalo con due manopole: una modalità di fusione, che decide come la grana grigia si mescola con il colore sotto, e l’opacità, che decide quanto è forte. soft-light mantiene puliti i colori ed è la più delicata; overlay aggiunge più contrasto. pointer-events: none impedisce al livello di bloccare i clic.

.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 preferisci un solo elemento senza pseudo-elemento, metti il rumore per primo in background-image e imposta background-blend-mode: soft-light, normal. Perdi la manopola separata dell’opacità, quindi incorpora l’intensità nell’SVG, ad esempio con opacity='0.5' sul rect.

Quanta grana basta

1. 1

   Parti debole

   Comincia con opacity: 0.3 e soft-light. Dovresti notarla appena a distanza di braccio.

2. 2

   Controlla la zona più scura

   Il banding vive nelle dissolvenze scure e lente. Alza l’opacità finché i gradini lì si sciolgono, poi fermati.

3. 3

   Adatta la grana alla dimensione

   Gli hero a schermo intero possono reggere una grana un po’ più grossa, intorno a 0,6. Schede e pulsanti vogliono una grana fine, intorno a 0,9.

4. 4

   Controlla su un telefono e su un grande monitor

   Una grana che va bene su uno schermo può sembrare polvere su un altro. Punta a una texture che si sente più che si vede.

5. 5

   Controlla il testo sopra

   La grana non deve ridurre la leggibilità. Se un testo piccolo sta sulla texture, riduci l’intensità o tieni il testo su una zona più calma.

Prestazioni del rumore in CSS

Un data URI ripetuto è economico: il browser disegna una volta il piccolo riquadro e lo ripete, e un livello statico viene dipinto una volta. La versione costosa è applicare il filtro dal vivo a un grande elemento con filter: url(#noise), che passa il filtro su ogni pixel ogni volta che l’area si ridisegna. Se animi la grana, per un effetto pellicola tremolante, sposta il livello ripetuto con transform in pochi scatti invece di rigenerare il rumore, e spegnilo per il movimento ridotto.

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

Un riquadro di rumore PNG o WebP già pronto, di circa 128-256 pixel, è una fonte altrettanto buona se ne hai già uno. La grana è anche un ingrediente di una famiglia più ampia di superfici, dalla carta al vetro, trattata nelle texture di sfondo. È anche lo strato finale di un gradiente mesh in CSS.

La grana è incorporata in ogni Mark di Gradiently come impostazione del materiale, accanto a luce e movimento, quindi i design realizzati con uno di essi portano la texture senza alcun codice.

GR·W4AX·4M

Muslin Anvil

Vedi questo Mark