Che cos'è il glassmorphism?

Uno stile visivo in cui un pannello traslucido sfoca ciò che sta dietro, come un vetro smerigliato, di solito con un bordo chiaro sottile e un'ombra morbida. In CSS combina uno sfondo semitrasparente con backdrop-filter: blur().

Perché il mio pannello di vetro non è sfocato?

backdrop-filter agisce solo sul contenuto dietro l'elemento, quindi l'elemento deve avere uno sfondo trasparente o semitrasparente e qualcosa di visibile dietro. Uno sfondo completamente opaco nasconde l'effetto.

Quali browser supportano backdrop-filter?

Lo supportano le versioni attuali di Chrome, Edge, Firefox e Safari. Le versioni di Safari precedenti alla 18 richiedono il prefisso -webkit-, incluso nel CSS esportato.

Generatore di glassmorphism

Crea pannelli in vetro smerigliato con backdrop-filter. Regola sfocatura, trasparenza, saturazione e bordo su uno sfondo dal vivo, poi copia il CSS.

Anteprima in tempo reale

Vetro smerigliato

Il testo sul vetro deve avere un contrasto sufficiente su ogni parte dello sfondo.

Lo sfondo serve solo per l'anteprima e non viene esportato.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Tutto rimane nel tuo browser.

Riferimenti

MDN — backdrop-filter
W3C — WCAG 2.2 contrast (minimum)

Pagina aggiornata: 2026-10-25

Anteprima in tempo reale

Guida ed esempio

Strumenti correlati

Riferimenti