Generatore Glassmorphism
Crea il CSS di card effetto vetro smerigliato con controlli per sfocatura, trasparenza, tinta, bordo e raggio degli angoli, tutto nel tuo browser.
🔒 Funziona interamente nel tuo browser — nulla viene caricatoCrea una superficie in vetro smerigliato
Il glassmorphism funziona lasciando trasparire lo sfondo attraverso una superficie traslucida, mentre una sfocatura ammorbidisce ciò che si trova dietro. Il risultato può apparire curato e moderno se usato con moderazione. Questo generatore glassmorphism ti offre controlli diretti sugli elementi chiave: tinta, trasparenza, sfocatura dello sfondo, opacità del bordo, raggio e ombra. Mentre regoli i valori, la card si aggiorna sopra un gradiente colorato, così puoi valutare se l'effetto vetro è visibile senza rendere il contenuto difficile da leggere.
Il CSS generato include background, backdrop-filter, la corrispondente proprietà con prefisso
WebKit, un bordo sottile, il raggio del bordo e l'ombra. Queste dichiarazioni bastano per una card riutilizzabile, un pannello di navigazione, una modale, un overlay hero o un widget di dashboard. Poiché l'effetto è puro
CSS, non ci sono immagini da esportare né elaborazioni su server. Il browser genera l'anteprima e
il pulsante di copia scrive il testo CSS negli appunti.
Bilanciare trasparenza e leggibilità
L'errore più comune nel glassmorphism è rendere la card troppo trasparente. Una bassa opacità può sembrare impressionante su un'anteprima vuota, ma titoli, etichette e icone reali hanno bisogno di abbastanza contrasto per restare leggibili su qualsiasi sfondo. Aumenta l'opacità quando lo sfondo è complesso, riducila quando lo sfondo è semplice e usa il bordo per separare la superficie da colori simili. La sfocatura aiuta a ridurre i dettagli dietro la card, ma non sostituisce il test del contrasto.
Dove usare l'effetto
Il vetro smerigliato dà il meglio in momenti mirati: una card dei prezzi su un gradiente hero, una barra degli strumenti fluttuante, un riepilogo del profilo o una modale sopra un'illustrazione ricca. Diventa confusionario se ogni componente lo usa contemporaneamente. Dopo aver copiato il CSS, provalo nel layout reale e aggiungi uno sfondo pieno di riserva se supporti browser meno recenti o dispositivi a bassissimo consumo. Una buona card in vetro dovrebbe dare un senso di livelli mantenendo chiare la gerarchia dell'interfaccia e i contenuti.
Come usare
- Scegli il colore del vetroSeleziona la tinta che si sovrappone allo sfondo.
- Regola sfocatura e opacitàModifica trasparenza, sfocatura dello sfondo, intensità del bordo e raggio.
- Copia il CSSIncolla gli stili della card in vetro generati nel tuo componente.