Softonic

Generatore di texture di rumore

Passaggio 1 / 2
Avanti

Un pizzico di rumore nasconde il banding, ammorbidisce i riempimenti a tinta unita e rende i gradienti dell’interfaccia meno asettici. Questo generatore crea una texture di rumore quadrata che si ripete senza giunture usando il filtro SVG feTurbulence, con controlli per colore di sfondo, opacità del rumore, frequenza della grana e tipo di rumore, e ti restituisce il CSS già pronto: un colore di sfondo più un data URI SVG in linea da incollare direttamente nel foglio di stile.

Come generare una texture di rumore

  1. 1

    Scegli il colore di sfondo

    La grana si sovrappone a questo colore, quindi parti dalla superficie che userai davvero.

  2. 2

    Imposta l'opacità

    Da appena percettibile (2-5%) a una grana cinematografica marcata (25% e oltre). Nelle interfacce vince quasi sempre la sobrietà.

  3. 3

    Regola la frequenza

    Una frequenza di base più alta dà una grana fine e fitta; una più bassa produce macchie più grandi e morbide.

  4. 4

    Scegli il tipo di rumore

    Il rumore frattale è morbido e naturale. La turbolenza ha più contrasto e un aspetto nuvoloso.

  5. 5

    Copia il CSS

    L'output è un colore di sfondo più un data URI SVG in linea, pronto da incollare nel tuo foglio di stile.

Rumore SVG con feTurbulence

Il modo più compatto per portare il rumore in pagina è SVG più un filtro di turbolenza:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

Inseriscilo in linea come background-image: url("data:image/svg+xml,...") e ottieni poche centinaia di byte di markup che si ripetono su qualsiasi superficie, senza alcuna richiesta HTTP aggiuntiva.

Impostazioni consigliate per caso d’uso

Caso d’uso Opacità Frequenza di base Tipo di rumore
Pannelli di interfaccia in modalità scura 3-5% 0,8-1,0 Rumore frattale
Livello sopra il gradiente della sezione hero 5-10% 0,7-0,9 Rumore frattale
Scheda con effetto carta 8-15% 0,6-0,8 Rumore frattale
Foto con grana cinematografica 15-25% 0,9-1,2 Rumore frattale
Grana da poster retro 25-40% 0,4-0,6 Turbolenza

Note sulle prestazioni

  • Nella maggior parte dei browser la turbolenza SVG non usa la GPU. Funziona negli sfondi CSS e viene ridisegnata a basso costo.
  • Riusa una sola piastrella. Il generatore produce una piastrella da 200 x 200 con stitchTiles="stitch", così su schermi ampi si ripete senza giunture visibili.
  • Evita di animare il rumore. feTurbulence non si anima bene senza modificare baseFrequency e le prestazioni crollano nelle sessioni lunghe.
  • Sovrapponi il rumore ai gradienti. Una grana al 10% di opacità sopra un gradiente CSS restituisce una superficie molto più ricca del gradiente da solo.

Domande frequenti

Ogni volta che una grande area a tinta unita o un gradiente risultano troppo puliti. Sezioni hero, sfondi delle finestre modali e pannelli scuri dell’interfaccia guadagnano profondità con un rumore del 3-10%. Evitalo nelle aree di testo, dove può compromettere la leggibilità.

Nel filtro feTurbulence di SVG, type="turbulence" produce il valore assoluto del rumore di Perlin (contrasto più elevato, effetto nuvoloso), mentre type="fractalNoise" restituisce valori con segno (grana più morbida e naturale). Per le interfacce il rumore frattale è quasi sempre la scelta giusta.

No. Il generatore restituisce un data URI SVG in linea di poche centinaia di byte, incorporato direttamente nel CSS: nessun file immagine e nessuna richiesta aggiuntiva. Inoltre si adatta a qualsiasi superficie senza ricampionamento.

Sì. Sui display a 8 bit per canale i gradienti possono mostrare bande visibili a basso contrasto. Uno strato di rumore del 2-3% applica un dithering alla transizione ed elimina il banding sia sui telefoni sia sui monitor.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Creatore di diagrammi di flusso

Crea nel browser diagrammi di flusso visivi con cinque tipi di nodo, connessioni dirette e download SVG o PNG.

Promemoria Markdown

Riferimento pratico Markdown con anteprime reali ed esempi pronti da copiare per titoli, elenchi, tabelle, codice, link, immagini e sintassi GFM.

Strumento disponibile in altre lingue