Generatore Glassmorphism CSS
Crea splendidi effetti UI a vetro con backdrop-filter, blur e trasparenza.
① Regola blur e opacità ② Scegli colore e bordo ③ Copia il CSS
Glassmorphism
backdrop-filter: blur(12px)
Preset:
12px
18%
180%
30%
16px
Codice CSS
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
}Cos'è il Glassmorphism?
Il glassmorphism è un trend UI che crea un aspetto a vetro smerigliato usando CSS backdrop-filter, sfondi semi-trasparenti e bordi sottili. Proprietà chiave: backdrop-filter: blur(12px) saturate(180%) sfoca il contenuto dietro. background: rgba(255,255,255,0.18) imposta il riempimento translucido. border: 1px solid rgba(255,255,255,0.3) aggiunge il bordo vetro. Richiede -webkit-backdrop-filter per Safari. Includi sempre un fallback @supports con sfondo semi-opaco per browser più datati.
Domande Frequenti
Il glassmorphism è uno stile UI che simula il vetro smerigliato usando CSS backdrop-filter con blur, sfondi colorati semi-trasparenti e bordi translucidi sottili.
Le proprietà fondamentali sono: backdrop-filter: blur(10px) — sfoca il contenuto dietro l'elemento. background: rgba(255,255,255,0.15) — sfondo semi-trasparente. border: 1px solid rgba(255,255,255,0.3) — bordo translucido.
backdrop-filter è supportato in Chrome, Firefox 103+, Edge e Safari (con prefisso -webkit-). Includi sempre sia -webkit-backdrop-filter che backdrop-filter per compatibilità massima.
Usa @supports: @supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(255,255,255,0.9); } }. Questo garantisce leggibilità anche senza l'effetto blur.
Il glassmorphism richiede contenuto DIETRO l'elemento di vetro. Su uno sfondo solido uniforme non c'è nulla da sfocare. Posiziona l'elemento su un'immagine o gradiente.
Valori tra 8px e 20px creano l'aspetto vetro più naturale. 10–16px è il punto ottimale comune.
Aggiungi box-shadow: box-shadow: 0 8px 32px rgba(0,0,0,0.15). Combina ombra interna (inset) con esterna per un effetto pannello di vetro convincente.