CSS Glassmorphism nel 2025: il modo corretto di implementarlo

Il glassmorphism è uno stile UI che simula il vetro smerigliato: una superficie traslucida che sfuoca il contenuto dietro di essa. L’effetto dipende da tre proprietà visive che lavorano insieme:

• Sfocatura dello sfondo — la caratteristica fondamentale, ottenuta con backdrop-filter: blur()
• Riempimento traslucido — un colore di sfondo semi-trasparente con rgba() o color-mix()
• Bordo sottile — un bordo chiaro per suggerire profondità

Non è un semplice effetto box-shadow, e non equivale a un’immagine di sfondo sfocata. La sfocatura deve essere applicata al contenuto dietro l’elemento — ecco perché backdrop-filter, non filter, è la proprietà corretta.

L’errore comune nei tutorial del 2021 era aggiungere filter: blur() alla card stessa, che sfoca il contenuto della card. È l’esatto contrario di quello che si vuole ottenere.

Ecco l’implementazione minimale e corretta:

.glass-card {
  /* 1. La sfocatura — proprietà più importante */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);

  /* 2. Riempimento traslucido */
  background: rgba(255, 255, 255, 0.12);

  /* 3. Bordo di profondità */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  /* 4. Ombra per la elevazione */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

Il prefisso -webkit- è ancora necessario per Safari, che ha la propria implementazione. Nel 2025, ometterlo significa che la card appare rotta per circa il 20% del traffico mobile.

La funzione saturate(180%) su backdrop-filter non è strettamente necessaria, ma rende lo sfondo sfocato più vivido, aumentando la percezione di profondità. È lo stesso trucco che macOS usa per il blur dei pannelli.

Alpha dello sfondo e raggio di sfocatura

Esiste una relazione inversa tra raggio di sfocatura e alpha dello sfondo. Più il riempimento è opaco, meno la sfocatura è percettibile. Un intervallo utile:

• Sfocatura pesante (20–30 px) + alpha basso (0.05–0.12) → effetto smerigliato massimo
• Sfocatura media (10–16 px) + alpha medio (0.12–0.25) → card standard
• Sfocatura leggera (4–8 px) + alpha alto (0.3–0.5) → accenno sottile di vetro

È qui che la maggior parte delle implementazioni glassmorphism fallisce in silenzio. Poiché lo sfondo è una sfocatura di contenuto imprevedibile, non è possibile conoscere il rapporto di contrasto effettivo in fase di progettazione. Il testo potrebbe trovarsi sopra un’area scura (ok) o quasi bianca (invisibile).

WCAG 2.1 Livello AA richiede un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande. La maggior parte delle implementazioni con testo bianco su vetro fallisce questa soglia quando il contenuto di sfondo è chiaro.

Le tre soluzioni, in ordine di preferenza

1. Text shadow / sfondo sottile sul testo

.glass-card p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

Veloce, senza elementi extra, preserva l’estetica glass. Ideale per etichette brevi e titoli.

2. Alpha più alto nell’area del testo

.glass-card .text-area {
  background: rgba(0, 0, 0, 0.35);
  padding: 12px 16px;
  border-radius: 8px;
}

Crea una zona più scura specificamente per il testo. Funziona bene per card con una chiara “striscia di contenuto”.

3. Controlla lo sfondo dietro la card

Se controlli lo sfondo (un gradiente, un’immagine tua), assicurati che l’area dietro la glass card non superi mai una certa luminosità. È la soluzione più pulita architetturalmente ma richiede controllo a livello di design.

backdrop-filter è una delle proprietà CSS più intensive per la GPU. Ecco cosa accade al render:

1. Il browser deve mettere l’elemento nel suo layer di compositing
2. Per ogni frame, copia i pixel dietro l’elemento
3. Applica il kernel di sfocatura a quella copia (costoso, specialmente ad alto raggio)
4. Composta il risultato di nuovo

Su un telefono Android di fascia media con sfondo complesso, una singola glass card con blur da 12 px può far crollare il frame rate da 60 fps a 40 fps. Due card possono arrivare a 25 fps. Non è ipotetico — verificalo con il tab Performance di Chrome DevTools.

Regole di performance per il glassmorphism

• Limita il raggio di sfocatura a 16 px nella maggior parte dei casi. 20–30 px è un lusso per componenti solo desktop
• Non animare backdrop-filter. Se hai bisogno di un’animazione di entrata, anima opacity o transform, applicando il backdrop-filter dall’inizio
• Non sovrapporre più layer glass sullo stesso asse z. Ogni layer moltiplica il costo della sfocatura
• Aggiungi will-change: transform per forzare il compositing GPU in anticipo
• Usa contain: layout style paint sull’elemento glass per limitare lo scope di reflow

La considerazione sul reduced-motion

Gli utenti che hanno abilitato “Riduci animazioni” nelle impostazioni OS spesso lo fanno perché sono sensibili agli effetti visivi — inclusa la qualità cangiante che il vetro può produrre quando lo sfondo scorre. Rispetta la preferenza:

@media (prefers-reduced-motion: reduce) {
  .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.85);
  }
}

Nonostante il 96% di supporto globale, ci sono ancora casi limite. Un’implementazione solida li gestisce tutti.

/* Base fallback — sempre applicato per primo */
.glass-card {
  background: rgba(30, 30, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

/* Enhancement — solo se backdrop-filter è supportato */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
  }
}

/* Override reduced-motion */
@media (prefers-reduced-motion: reduce) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass-card {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(30, 30, 30, 0.88);
    }
  }
}

Il fallback usa uno sfondo quasi opaco — la card sembra ancora intenzionale, non rotta. Il blocco @supports la aggiorna al vetro completo solo dove il browser può gestirlo.

Il vetro chiaro su scuro e il vetro scuro su chiaro richiedono set di parametri diversi. I valori del tutorial “standard” (riempimento bianco, bordo bianco) funzionano solo su sfondi scuri.

/* Glass card tema scuro */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* Glass card tema chiaro */
@media (prefers-color-scheme: light) {
  .glass-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  }
}

Per i temi chiari, è necessario un alpha molto più alto (0.5+) perché lo sfondo è già chiaro — il contrasto tra card e sfondo è inferiore. Riduci anche leggermente saturate() per evitare di sovrasaturare lo sfondo in ambienti luminosi.

Evita il glassmorphism in queste situazioni:

• Interfacce ricche di dati — tabelle, editor di codice, fogli di calcolo. La sfocatura distrae
• Contenuto su immagini generate dagli utenti — non puoi prevedere o controllare il contenuto di sfondo
• Dispositivi target a basse performance — se il tuo pubblico usa principalmente telefoni Android di fascia bassa, il costo in performance è troppo alto
• Overlay interattivi con apertura/chiusura frequente — modal e dropdown che si animano spesso. Ogni apertura/chiusura avvia l’intera pipeline di compositing backdrop-filter

Se leggere i parametri sembra astratto, usa il tool glassmorphism di PixCode per visualizzare le modifiche in tempo reale. Espone tutti i valori trattati in questo articolo e permette di esportare il CSS finale con il fallback @supports incluso.

Il glassmorphism CSS si basa sulla proprietà backdrop-filter, che ha raggiunto il supporto completo cross-browser (Chrome, Firefox, Safari, Edge) nel 2023. Nel 2025, il supporto globale è di circa il 96%, rendendolo sicuro per l’uso in produzione, a condizione di includere il prefisso -webkit- per Safari e un fallback solido con @supports.

La tecnica è stata popolarizzata nel 2021, ma la maggior parte della documentazione precede la disponibilità diffusa di backdrop-filter in Firefox, che ha aggiunto il supporto nella versione 103 (2022). Dopo Firefox, l’implementazione corretta non richiede più polyfill JavaScript o workaround con filtri SVG.