Glassmorphism CSS
Crea un effetto vetro smerigliato (sfocatura sfondo) con anteprima dal vivo e CSS pronto.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
Un effetto vetro, senza tentativi
Imposta sfocatura, trasparenza, raggio e bordo: il pannello di vetro smerigliato si aggiorna dal vivo su uno sfondo colorato, e il CSS completo (con prefisso Safari) è pronto da copiare.
-
Imposta la sfocatura
Quanto è sfocato lo sfondo.
-
Regola il vetro
Trasparenza, raggio, bordo, tinta.
-
Copia il CSS
Applicalo alla tua card o barra.
Il CSS generato (impostazioni predefinite)
| Proprietà | Valore |
|---|---|
| background | rgba(255, 255, 255, 0.25) |
| backdrop-filter | blur(8px) |
| border-radius | 16px |
| border | 1px solid rgba(255, 255, 255, 0.18) |
Il prefisso -webkit-backdrop-filter è aggiunto per Safari. L’effetto è visibile solo su uno sfondo non piatto. Tutto è generato localmente.
Domande frequenti
Cos’è il glassmorphism?
Uno stile di interfaccia che imita il vetro smerigliato: un pannello semitrasparente che sfoca ciò che passa dietro, con un bordo chiaro e sottile. Molto usato per card, barre e finestre moderne.
Come si ottiene l’effetto in CSS?
Con backdrop-filter: blur(...) che sfoca lo sfondo, un riempimento rgba semitrasparente, un border-radius e un bordo rgba chiaro. Lo strumento genera queste righe e il prefisso -webkit- per Safari.
Perché lo sfondo deve essere colorato?
La sfocatura è visibile solo se c’è qualcosa da sfocare dietro il pannello. Su uno sfondo piatto l’effetto sparisce. Per questo l’anteprima mette il vetro su un gradiente.
È compatibile con tutti i browser?
backdrop-filter è ben supportato sui browser recenti (con -webkit- per Safari). Sui browser molto vecchi, prevedi un riempimento di riserva un po’ più opaco per la leggibilità.