Generatore di glassmorphism (vetro smerigliato)
Regola sfocatura, trasparenza e bordo finché la card sembra vetro sopra lo sfondo. Cambia lo sfondo per provare e copia il CSS.
Come si usaEffetto vetro smerigliato
Disponibile in: 
Generatore di glassmorphism (vetro smerigliato): a cosa serve
Regola sfocatura, trasparenza, saturazione, colore del vetro, bordo e angoli. L anteprima mostra la card sopra una sfumatura con forme, un paesaggio, uno sfondo scuro o la tua foto.
Il CSS include backdrop-filter e il prefisso -webkit- per Safari, più un colore di riserva più opaco per i browser che non supportano la sfocatura.
Come si usa
- Regola sfocatura, trasparenza e bordo.
- Cambia lo sfondo dell’anteprima o usa la tua foto.
- Copia il CSS e applica la classe vetro.
Quando usarlo
- Intestazioni e menu con sfondo di vetro.
- Card in evidenza sopra le foto.
- Interfacce dall’aspetto moderno.
Domande frequenti
Perché il vetro non si vede?
L effetto si vede solo se dietro la card c’è qualcosa di colorato o con dettagli: foto, sfumature o forme. Su uno sfondo bianco uniforme, il vetro smerigliato sembra una semplice card bianca.
Pesa sulle prestazioni?
Un po’: il browser deve sfocare ciò che sta dietro. Usalo su pochi elementi (intestazione, card in evidenza) ed evitalo su liste lunghe o su smartphone meno potenti.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.