Genera visivamente effetti CSS di vetro smerigliato per la tua UI.
Regola tre cursori — sfocatura, trasparenza e opacità del bordo — e guarda l’effetto aggiornarsi in tempo reale su uno sfondo colorato. Quando ti piace, copia il CSS pronto all’uso e incollalo nel tuo foglio di stile.
Usa i tre cursori per regolare Sfocatura, Trasparenza e Opacità bordo. L’anteprima si aggiorna dal vivo. Copia il CSS generato dalla casella di testo in basso nel pannello dei controlli.
Un’interfaccia in stile glass funziona meglio quando appare intenzionale e non solo ornamentale. Un pannello ha bisogno di abbastanza blur per separarsi dallo sfondo, abbastanza opacità per sostenere contenuti leggibili e abbastanza definizione del bordo per mantenere la propria forma. Sono decisioni visive, sottili e difficili da prendere partendo da valori CSS grezzi.
Questo strumento ti permette di regolare direttamente quella superficie e di portare il CSS risultante dentro un’interfaccia reale.
I pannelli in stile vetro vengono spesso usati per sollevare testo o controlli da un’immagine o da uno sfondo colorato senza coprirlo del tutto.
Menu, pannelli laterali e card flottanti a volte beneficiano del sembrare più leggeri di un blocco pieno di colore.
Se un prodotto usa livelli traslucidi, spesso serve un modo ripetibile per confrontare varianti sottili invece di reinventare l’effetto componente per componente.
Un blur forte può sembrare elegante in una demo e risultare comunque pesante o distraente in una UI reale.
Se lo sfondo passa troppo, l’effetto smette di aiutare la leggibilità e inizia a comprometterla.
In una UI stile vetro, il trattamento del bordo lavora spesso più di quanto si pensi. Senza abbastanza definizione, il pannello perde forma.
Qui l’effetto può essere davvero utile: separazione morbida senza un blocco completamente opaco.
Alcuni layout guadagnano da una superficie più leggera, ma solo se il pannello resta leggibile sopra contenuti reali.
Se l’effetto fa parte di un linguaggio visivo più ampio, la coerenza conta più del singolo esempio spettacolare.
Questo strumento genera il CSS visivo per un effetto vetro. Non garantisce contrasto del testo, non risolve i compromessi di performance su dispositivi più deboli e non decide se l’effetto sia una buona scelta di design. Aiuta a regolare il trattamento, non a giustificarlo.
Fatto bene, l’effetto vetro crea separazione senza pesantezza visiva. Fatto male, riduce la leggibilità. Un generatore è utile perché la linea tra i due risultati passa spesso da piccoli settaggi, non da grandi idee.
Il glassmorphism richiede uno sfondo colorato o un'immagine dietro l'elemento. Su uno sfondo bianco semplice, la sfocatura non ha nulla su cui agire e l'effetto non è visibile.
Sì — in tutti i browser moderni (Chrome, Firefox, Safari, Edge). Il CSS generato include automaticamente il prefisso -webkit- per Safari.
Questo strumento gira interamente nel tuo browser. Nulla di ciò che digiti o incolli viene inviato a un server — tutta l'elaborazione avviene localmente sul tuo dispositivo.