Generatore di Glassmorphism
Il generatore di glassmorphism crea l'effetto vetro smerigliato con backdrop-filter CSS e ti permette di regolare sfocatura, opacità dello sfondo, saturazione, opacità del bordo, raggio e colore della tinta con anteprima in tempo reale.
Informazioni su questo strumento
Il generatore di glassmorphism crea l'effetto vetro smerigliato con backdrop-filter CSS e ti permette di regolare sfocatura, opacità dello sfondo, saturazione, opacità del bordo, raggio e colore della tinta con anteprima in tempo reale.
Come si usa
- Scegli il colore della tinta del vetro.
- Regola sfocatura, opacità e saturazione.
- Imposta l'opacità del bordo e il border radius.
- Clicca Copy CSS.
Da sapere
- L'effetto usa backdrop-filter: blur() saturate(), che sfoca tutto ciò che si trova dietro l'elemento.
- Serve uno sfondo semitrasparente (rgba), altrimenti la sfocatura resta nascosta.
- Il CSS generato include il prefisso -webkit-backdrop-filter per Safari.
- L'effetto vetro rende al meglio su sfondi colorati o fotografici; sui colori piatti la sfocatura non si vede.
- Tieni d'occhio il contrasto del testo: i pannelli traslucidi su sfondi movimentati possono scendere sotto il contrasto WCAG.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Come creo un effetto vetro in CSS?
Dai all'elemento uno sfondo semitrasparente, come rgba(255,255,255,0.15), e backdrop-filter: blur(12px); questo strumento scrive la regola completa.
Perché il mio backdrop-filter non funziona?
L'elemento deve avere uno sfondo trasparente o semitrasparente, e dietro deve esserci qualcosa da sfocare. Safari richiede anche il prefisso -webkit-.
Il glassmorphism è accessibile?
Può esserlo, se il testo mantiene un contrasto sufficiente. Verifica i colori del testo sulla parte più movimentata dello sfondo.
backdrop-filter peggiora le prestazioni?
La sfocatura è pesante per la GPU, quindi evita di applicarla a superfici molto grandi o a molti elementi contemporaneamente, soprattutto sugli smartphone di fascia bassa.