Generatore di glassmorphism CSS

Questo strumento crea un effetto CSS di vetro smerigliato (glassmorphism) combinando uno sfondo semitrasparente con backdrop-filter: blur() — trascina i cursori sopra l'anteprima colorata per vedere la scheda di vetro sfocare ciò che si trova dietro di essa, poi copia il codice CSS. Genera anche il prefisso -webkit-backdrop-filter, tuttora necessario in Safari.

Che cos'è questo strumento?

Il glassmorphism è uno stile di interfaccia in cui un elemento appare come vetro smerigliato: uno sfondo semitrasparente lascia intravedere i colori che si trovano dietro di esso, mentre backdrop-filter: blur() sfoca quello sfondo, facendolo leggere come vetro anziché come un semplice pannello trasparente. Un bordo sottile e semitrasparente insieme ad angoli arrotondati completano solitamente questo aspetto.

Questo strumento ti permette di creare quell'effetto in modo visivo. L'anteprima è posizionata sopra uno sfondo in gradiente animato apposta per rendere visibile la sfocatura — il glassmorphism si legge correttamente solo su qualcosa che abbia colore o dettagli dietro di sé, non su una pagina bianca piatta. Regola l'opacità del colore di sfondo, l'intensità della sfocatura, l'opacità del bordo e il raggio degli angoli, poi copia il codice CSS generato.

Fonte: Filter Effects Module Level 1, W3C — definisce backdrop-filter, la proprietà su cui si basa questo effetto.

Perché usarlo?

Anteprima in tempo reale su uno sfondo animato e colorato, così puoi vedere davvero l'effetto vetro smerigliato invece di indovinare i valori di sfocatura su uno sfondo vuoto.
Controllo completo su opacità dello sfondo, intensità della sfocatura del backdrop-filter, opacità del bordo e border-radius, tutto in un unico posto.
Genera automaticamente sia backdrop-filter sia il prefisso -webkit-backdrop-filter, così non dimentichi il supporto a Safari.
Funziona interamente nel browser: nessuna delle impostazioni configurate viene caricata da nessuna parte.
Gratuito, senza registrazione, funziona su dispositivi mobili.

Come si usa

Scegli un colore di sfondo e regolane l'opacità: un'opacità più bassa (10–25%) si legge come vetro, mentre un'opacità più alta appare più come un pannello colorato solido.
Aumenta l'intensità della sfocatura per sfocare ciò che si trova dietro l'elemento: è proprio questo a creare l'effetto vetro smerigliato, distinto dalla trasparenza in sé.
Regola l'opacità del bordo per aggiungere un sottile bordo chiaro, che aiuta la scheda in vetro a farsi leggere come una superficie distinta invece di fondersi con lo sfondo.
Imposta il border-radius per arrotondare gli angoli: le schede in stile glassmorphism sono quasi sempre arrotondate, raramente con angoli vivi.
Copia il codice CSS generato e incollalo nel tuo foglio di stile. Ricorda che l'elemento ha bisogno di qualcosa con colore o texture dietro di sé: il glassmorphism è invisibile su uno sfondo piatto di un solo colore.

Esempio

Input

Sfondo: bianco al 20% di opacità · Sfocatura: 10px · Opacità del bordo: 30% · Raggio: 16px

Risultato

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Un classico stile di scheda in vetro smerigliato, usato in pannelli di accesso, barre di navigazione e widget di dashboard su sfondi colorati o fotografici.

Supporto di Safari e dei browser

backdrop-filter è supportato nelle versioni attuali di Chrome, Firefox, Edge e Safari, ma Safari ha storicamente richiesto il prefisso -webkit-backdrop-filter accanto alla proprietà senza prefisso per rendere la sfocatura: senza di esso, le versioni più datate di Safari ignorano silenziosamente la sfocatura e mostrano solo lo sfondo trasparente piatto. Per questo motivo, questo strumento genera sempre entrambe le dichiarazioni.

Per i dettagli aggiornati sulla compatibilità tra browser, consulta la documentazione di backdrop-filter su MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Perché il glassmorphism ha bisogno di qualcosa dietro di sé

backdrop-filter sfoca solo ciò che si trova visivamente dietro l'elemento: un'immagine di sfondo, un gradiente, un altro elemento colorato o contenuti che scorrono sotto. Su uno sfondo bianco piatto o di un solo colore non c'è nulla da sfocare, quindi l'effetto risulta invisibile e l'elemento appare semplicemente come un riquadro arrotondato leggermente colorato. Posiziona sempre gli elementi in stile glassmorphism sopra un gradiente, una foto o uno sfondo comunque ricco di dettagli affinché l'effetto sia leggibile.

Abbinamento con altri effetti CSS

Le schede in stile glassmorphism combinano spesso un sottile box-shadow sottostante per dare maggiore profondità. Genera qui il CSS del vetro smerigliato, poi aggiungi un'ombra morbida con il Generatore di ombreggiatura dei riquadri e applica entrambe le dichiarazioni allo stesso elemento.

→ Generatore di ombreggiatura dei riquadri · Generatore di raggio di bordo

Domande frequenti

Perché l'effetto vetro non appare sulla mia pagina?

backdrop-filter sfoca ciò che si trova dietro l'elemento. Se il tuo elemento è posizionato sopra uno sfondo bianco piatto o di un solo colore, non c'è nulla di visivamente interessante da sfocare, quindi appare solo come un riquadro leggermente colorato. Posizionalo sopra un gradiente, un'immagine o un altro sfondo ricco di dettagli affinché l'effetto vetro smerigliato sia visibile.

Serve il prefisso -webkit-backdrop-filter?

Sì, se vuoi che l'effetto venga renderizzato in modo affidabile su Safari. Questo strumento genera sempre insieme sia il backdrop-filter standard sia la versione con prefisso -webkit-, poiché Safari ha storicamente richiesto il prefisso per applicare la sfocatura.

Qual è la differenza tra opacità dello sfondo e sfocatura?

L'opacità dello sfondo controlla quanto è visibile il colore di tinta scelto rispetto a quanto traspare inalterato ciò che si trova dietro. La sfocatura controlla quanto quello sfondo visibile viene sfumato/ammorbidito. Il glassmorphism usa entrambi insieme — un po' di trasparenza più un po' di sfocatura — anziché uno solo dei due.

Posso usare backdrop-filter su qualsiasi elemento?

Sì, ma influisce solo su ciò che si trova visivamente dietro quell'elemento nel rendering della pagina, non sui figli dell'elemento stesso. Ha anche un costo in termini di prestazioni su alcuni dispositivi quando viene applicato a molti elementi o animato di frequente, quindi è preferibile usarlo per un numero limitato di superfici dell'interfaccia in evidenza, come schede, finestre modali o barre di navigazione, piuttosto che su decine di piccoli elementi.

Perché il mio bordo si vede a malapena?

Il bordo di questo strumento usa un bianco semitrasparente, pensato per essere discreto: un bordo chiaro che aiuta il pannello di vetro a farsi leggere come una superficie distinta senza sembrare un contorno rigido e opaco. Aumenta il cursore dell'opacità del bordo se desideri un bordo più visibile.