Glassmorfismo in CSS: L'Effetto Vetro Smerigliato Spiegato

Il glassmorphism — l'effetto del vetro smerigliato — è una delle tendenze di design più influenti degli ultimi anni, resa popolare da macOS Big Sur nel 2020. L'effetto crea elementi semi-trasparenti con sfocatura dello sfondo, bordi luminosi e ombra sottile. Il nostro generatore produce il codice CSS ottimale.

Le Proprietà CSS del Glassmorphism

• backdrop-filter: blur(Xpx): La proprietà chiave — sfoca tutto ciò che è dietro l'elemento. Valori comuni: 8-20px.
• background: rgba(255,255,255,0.1-0.2): Sfondo semi-trasparente bianco (per tema chiaro) o scuro.
• border: 1px solid rgba(255,255,255,0.18): Bordo sottilmente luminoso che simula il bordo del vetro.
• box-shadow: Ombra leggera per profondità.

Compatibilità Browser

backdrop-filter è supportato da tutti i browser moderni. Safari lo supporta con prefisso -webkit-. Per i rari browser che non lo supportano, usa un fallback con background semi-opaco senza blur. Il nostro generatore include automaticamente il prefisso -webkit- e un fallback.