Generatore CSS Glassmorphism
Progetta un effetto vetro (glassmorphism) con anteprima dal vivo — regola sfocatura, trasparenza, tinta e bordo, poi copia il CSS.
666 visualizzazioni
Cos'è il Glassmorphism?
Il glassmorphism è l'aspetto del vetro smerigliato: un pannello semitrasparente che sfoca ciò che c'è dietro usando backdrop-filter: blur(), combinato con un bordo sottile e un'ombra. Funziona meglio su sfondi colorati o immagini — su uno sfondo semplice la sfocatura è invisibile.
Muovi i cursori e osserva l'anteprima dal vivo; il CSS qui sotto si aggiorna all'istante ed è pronto da copiare. Ricorda il prefisso -webkit-backdrop-filter per Safari, già incluso nel codice generato.
Domande Frequenti
Perché il mio effetto vetro appare piatto?
backdrop-filter si nota solo su uno sfondo variegato — posiziona l'elemento sopra un gradiente o un'immagine. Controlla anche il supporto del browser: Safari richiede il prefisso -webkit- (incluso nel codice generato).
backdrop-filter danneggia le prestazioni?
La sfocatura è accelerata dalla GPU ma non è gratuita. Usala su poche superfici chiave (card, header) invece che su decine di elementi, e mantieni raggi di sfocatura moderati su mobile.
Quali valori danno un look vetro classico?
Un buon punto di partenza: sfondo bianco al 15-25% di opacità, sfocatura di 8-12px, bordo di 1px al 30% di bianco e raggio di 16px — i valori predefiniti di questo generatore.
Strumenti Simili
Segnala un Problema
Generatore CSS Glassmorphism