Is this tool free to use?

Yes, the core functionality is completely free with no watermarks. Pro plans are available for higher limits.

How secure are my files?

All uploads use 256-bit TLS encryption. Files are deleted from our servers within 1 hour of processing.

Does it work on mobile?

Absolutely. The tool is fully responsive and works in any modern mobile browser.

What file formats are accepted?

Please see the accepted formats listed in the upload area above.

Generatore CSS

Generatore CSS Glassmorphism

Crea straordinari effetti UI in vetro smerigliato con anteprima dal vivo - proprio come ui.glass. Regola sfocatura, trasparenza, colore, bordo e ombra, poi copia CSS pronto per la produzione, HTML, Tailwind o React.

✓ Anteprima dal Vivo ✓ Selettore Colore RGBA ✓ Sfondo Immagine ✓ Output CSS + HTML ✓ 20 Preset ✓ Tailwind e React ✓ Modalità Scura / Chiara

Impostazioni Avanzate

Raggio del Bordo 12px

Larghezza del Bordo 1px

Opacità del Bordo 20%

Sfocatura Ombra 32px

Opacità Ombra 25%

Sovrapposizione texture rumore

Bordo luce (solo bordo superiore+sinistro)

Includi -webkit-backdrop-filter

Preset di Stile

Scene di Sfondo (per tipo Scena Animata)

Come Creare Effetti Glassmorphism

Imposta lo Sfondo

Incolla un URL immagine, scegli un gradiente o seleziona una scena animata. Il glassmorphism risplende solo su sfondi colorati e contrastanti.

Regola il Vetro

Modifica sfocatura, opacità e saturazione. Scegli il colore della tinta della carta con il selettore colore RGBA completo. Abilita il rumore per texture extra.

Copia e Usa

Copia il CSS completo, il frammento HTML, le classi Tailwind o il componente React - tutti includono i prefissi del browser per la massima compatibilità.

Riferimento CSS Glassmorphism

backdrop-filter

backdrop-filter: blur(12px) saturate(180%);

La proprietà principale. blur() smeriglia lo sfondo, saturate() fa risaltare i colori. Aggiungi sempre -webkit-backdrop-filter per Safari.

background

background: rgba(255,255,255,0.15);

Tinta semi-trasparente sopra lo sfondo sfocato. Mantieni l'opacità bassa (10–25%). Usa bianco per vetro chiaro, scuro per vetro scuro.

border

border: 1px solid rgba(255,255,255,0.2);

Un bordo traslucido sottile definisce il bordo del vetro. Applica solo a superiore+sinistro per simulare una fonte di luce dall'alto-sinistra (effetto bordo luce).

box-shadow

box-shadow: 0 8px 32px rgba(0,0,0,0.25);

Ombra morbida con raggio grande che ancorare l'elemento. Mantieni l'ombra scura con bassa opacità - evita ombre dure o con raggio piccolo.

Domande Frequenti

Cos'è il glassmorphism?

Una tendenza del design UI con elementi semi-trasparenti e sfocati che simulano il vetro smerigliato. Popolarizzata su Dribbble, interfacce iOS, macOS e Windows 11.

Quali browser supportano backdrop-filter?

backdrop-filter funziona in Chrome 76+, Edge 79+, Firefox 103+ e Safari 9+ (con prefisso -webkit-). Abilita l'interruttore webkit per la massima compatibilità.

Perché il mio effetto vetro sembra piatto?

Il glassmorphism ha bisogno di uno sfondo colorato dietro l'elemento affinché la sfocatura sia visibile. Su sfondi bianchi o solidi l'effetto scompare. Usa sempre gradienti, immagini o blob.

Come uso questo in Tailwind CSS?

Tailwind v3+ include backdrop-blur-*, backdrop-saturate-*, bg-white/10 e border-white/20. Copia la scheda Tailwind per la lista completa delle classi.

Come funziona la texture rumore?

Abilita il rumore nelle Impostazioni Avanzate - aggiunge uno pseudo-elemento ::before con un filtro SVG fractalNoise a bassa opacità, creando la texture smerigliata vista sul vetro UI premium.