# Texture di rumore in CSS: aggiungere grana ai gradienti con SVG [Canonical HTML page](https://gradiently.design/it/guide/css-noise-texture) Un debole strato di rumore nasconde il banding e fa sembrare il colore piatto dello schermo stampa o pellicola. Ecco il filtro SVG che lo produce, regolato e pronto da incollare. ## The short version - Una texture di rumore in CSS di solito si crea con un filtro SVG feTurbulence, incorporato come piccola immagine data URI e ripetuto sopra un gradiente. - Il baseFrequency di feTurbulence stabilisce la grandezza della grana: valori più alti danno una grana più fine, valori più bassi un rumore grosso e nuvoloso. - Il rumore funziona meglio sovrapposto al gradiente su uno pseudo-elemento con una modalità di fusione come soft-light o overlay e una bassa opacità. - La grana nasconde il banding dei gradienti perché spezza i bordi visibili tra sfumature vicine in una fine variazione casuale. - Un’immagine di rumore ripetuta è economica da disegnare, mentre applicare un filtro SVG dal vivo a un grande elemento, o animarlo, costa molto di più. 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](https://gradiently.design/it/guide/grainy-gradients). Questa guida è l’implementazione. ## Il filtro di rumore SVG ```html ``` Un riquadro di 240 pixel di rumore grigio. Salvalo come noise.svg, oppure incorporalo come mostrato più sotto. | Attributo | Valore qui | Cosa controlla | | --- | --- | --- | | `type` | `fractalNoise` | Grana morbida e uniforme. `turbulence` dà un rumore più striato e ondulato. | | `baseFrequency` | `0.8` | Grandezza della grana. Da 0,6 a 0,9 è grana fine; da 0,1 a 0,3 è nuvolosa. | | `numOctaves` | `3` | Livelli di dettaglio. Oltre 4 circa la differenza è difficile da vedere. | | `stitchTiles` | `stitch` | Fa combaciare i bordi del riquadro, così le ripetizioni non hanno giunture. | | `feColorMatrix` saturate 0 | `0` | Toglie il colore casuale, lasciando una grana grigia. | Le impostazioni che contano. Il [riferimento MDN su feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) documenta il resto. ## 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. ```css :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"); } ``` Lo stesso riquadro come proprietà personalizzata riusabile ovunque. Dimenticare di codificare `#` come `%23` è il solito motivo per cui in Firefox non si vede nulla. ## 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. ```css .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; } ``` La grana tra il gradiente e il contenuto: il testo dentro `.grain` resta nitido. - Viola al tramonto: grana morbida: `linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6)` - Bagliore ardesia: grana anti-banding: `radial-gradient(ellipse at 30% 20%, #334155, #0f172a 70%)` - Alba pesca: la grana sa di carta: `linear-gradient(180deg, #fef3c7, #fdba74 60%, #fb7185)` Tre gradienti che guadagnano di più dalla grana. Le dissolvenze scure e a basso contrasto come quella centrale sono dove il banding si vede per primo. 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. **Parti debole** Comincia con `opacity: 0.3` e `soft-light`. Dovresti notarla appena a distanza di braccio. 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. **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. **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. **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. ### Troppa - Grana visibile da una parte all’altra della stanza - I colori diventano grigi e sporchi - Rumore grosso e nuvoloso su componenti piccoli - I bordi del testo sembrano sfocati contro la granulosità ### Giusta - Grana notata solo da vicino - I colori restano puliti con soft-light - Grana fine proporzionata all’elemento - Banding sparito, testo nitido ## 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](https://gradiently.design/it/guide/reduced-motion). ```css .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; } } ``` Grana animata spostando un riquadro sovradimensionato. L’inset negativo mantiene coperti i bordi mentre si sposta. 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](https://gradiently.design/it/guide/background-texture). È anche lo strato finale di un [gradiente mesh in CSS](https://gradiently.design/it/guide/css-mesh-gradient). 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. Un Mark con la grana come parte del materiale, disegnato dal vivo invece che sovrapposto dopo. ## FAQ ### Come aggiungo una texture di rumore in CSS? Incorpora un SVG con un filtro `feTurbulence` come data URI, ripetilo su uno pseudo-elemento sopra il gradiente e imposta una modalità di fusione come `soft-light` con bassa opacità. ### Perché il mio data URI di rumore SVG non si vede? Di solito per un carattere non codificato. Nel data URI codifica `#` come `%23`, `%` come `%25` e le parentesi angolari come `%3C` e `%3E`, e usa apici singoli dentro l’SVG. ### La grana risolve il banding dei gradienti? Sì, nella maggior parte dei casi. Una fine variazione casuale spezza i bordi netti tra sfumature vicine, così l’occhio non vede più i gradini. ### Quale baseFrequency devo usare per la grana? Da 0,6 a 0,9 dà una grana fine simile alla pellicola. Valori più bassi come 0,2 danno un rumore grosso e nuvoloso. ### Il rumore in CSS fa male alle prestazioni? Una piccola immagine di rumore ripetuta è economica. A costare di più sono i filtri SVG dal vivo su grandi elementi e il rumore rigenerato di continuo.