Glassmorphism CSS: Come creare UI con effetto vetro

Il glassmorphism è diventato uno dei trend UI più caratteristici dei primi anni 2020. L'effetto vetro smerigliato crea profondità e traslucidità che sembra moderno e premium.

L'implementazione CSS richiede tre ingredienti: backdrop-filter per la sfocatura, rgba per la trasparenza e un bordo semi-trasparente.

Cos'è il glassmorphism

Il glassmorphism è uno stile di design caratterizzato da superfici traslucide con effetto vetro smerigliato. Proprietà visive chiave: trasparenza di sfondo (opacità 30-50%), sfocatura di sfondo (8-32px), bordo sottile (1-2px, bianco semi-trasparente), ombra morbida.

Sintassi backdrop-filter: blur()

backdrop-filter applica effetti grafici al contenuto dietro un elemento. La funzione blur() sfochia lo sfondo: backdrop-filter: blur(12px). A differenza di filter: blur() che sfochia l'elemento stesso, backdrop-filter sfochia tutto dietro l'elemento.

rgba e trasparenza

La superficie di vetro usa rgba() per il colore di sfondo con bassa alpha: background: rgba(255, 255, 255, 0.15). Il valore alpha (0.15-0.25) controlla la trasparenza della superficie.

Bordo con rgba

Una caratteristica distintiva del glassmorphism è il bordo semi-trasparente che cattura la luce. Usa: border: 1px solid rgba(255, 255, 255, 0.3). Il bordo simula la luce che si riflette sul bordo del vetro.

Supporto browser e fallback

backdrop-filter è supportato in tutti i browser moderni dal 2022. Per i browser più vecchi, fornisci un fallback con uno sfondo solido o leggermente trasparente. Usa @supports (backdrop-filter: blur(1px)) per applicare il glassmorphism solo dove supportato.

Considerazioni sulle prestazioni

backdrop-filter è costoso — attiva la composizione e può ridurre le prestazioni su pagine complesse o dispositivi mobili. Limita il numero di elementi con backdrop-filter e testa su dispositivi a basse prestazioni.

Domande frequenti