Come creare un effetto Glassmorphism in CSS
Pubblicato il 15 settembre 2026 · 2 min di lettura
L’aspetto vetro smerigliato "glassmorphism" — un pannello traslucido e sfocato che fluttua su uno sfondo colorato — si riduce a una combinazione specifica di opacità dello sfondo, sfocatura backdrop-filter, e un bordo sottile. Questo strumento ti permette di regolare tutti e tre con un’anteprima live.
Prova Generatore GlassmorphismPassaggi
- 1
Apri il Generatore Glassmorphism
Vai al generatore di glassmorphism.
- 2
Imposta tinta e opacità
Scegli il colore base del pannello di vetro e quanto dovrebbe essere trasparente.
- 3
Regola sfocatura e saturazione
Imposta l’intensità della sfocatura dello sfondo e un aumento di saturazione per quel look vivido di vetro smerigliato.
- 4
Copia il CSS
Incolla le regole background, backdrop-filter e border generate nel tuo foglio di stile.
Domande frequenti
La sfocatura dello sfondo ha un effetto visibile solo quando c’è qualcosa dietro l’elemento da sfocare — uno sfondo solido semplice non mostrerà l’effetto vetro, quindi l’anteprima live usa un gradiente colorato per dimostrarlo correttamente.
È supportato in tutti i browser moderni; versioni di browser molto vecchie potrebbero non renderizzare la sfocatura, anche se lo sfondo semi-trasparente da solo fornisce comunque un aspetto di fallback ragionevole.
Sì — l’opacità del bordo è regolabile insieme a sfocatura, tinta e saturazione, poiché un sottile bordo chiaro fa parte di ciò che rende convincente il look del vetro.
Poiché l’anteprima renderizza il CSS reale dal vivo, puoi affinare l’effetto finché non appare giusto prima di copiare una singola riga di codice.