Generatore CSS di glassmorphism
Genera CSS per pannelli in vetro satinato o superfici neomorfiche morbide usando semplici cursori interattivi.
Generatore CSS di glassmorphism
Crea una regola CSS completa e pronta da incollare per un pannello in vetro satinato o una superficie neomorfica morbida senza scrivere alcun valore a mano. Scegli glassmorphism per una scheda traslucida che sfoca ciò che c'è dietro — l'aspetto utilizzato nei dashboard moderni, nei pannelli di accesso e nelle modali — o neomorfismo per una superficie che sembra essere modellata dallo stesso materiale del suo sfondo, utilizzando una coppia di ombre morbide opposte anziché la trasparenza.
Le opzioni si mappano direttamente alle proprietà che lo strumento scrive. In modalità vetro, l'opacità della superficie e l'intensità della sfocatura controllano l'alfa di sfondo e la sfocatura backdrop-filter, mentre lo spessore del bordo e la luminosità del bordo impostano un bordo sottile e semi-trasparente che mantiene il pannello leggibile su sfondi occupati. La distanza dell'ombra e la morbidezza modellano l'ombra esterna sotto il pannello, e il selettore di forma lo capovolge in un'ombra incavata per un aspetto incassato. In modalità neomorfismo, gli stessi valori di distanza dell'ombra e morbidezza determinano un'ombra chiara e un'ombra scura calcolate dal colore della superficie, sollevate o premute a seconda della forma scelta. L'arrotondamento degli angoli e una variante in modalità scura si applicano a entrambi gli stili.
Poiché una superficie satinata o leggermente ombreggiata può rientrare in una tonalità intermedia difficile da leggere con testo nero o bianco, lo strumento controlla il contrasto risultante e aggiunge un breve commento di avvertenza sopra il CSS quando nessun colore di testo risulterebbe confortevole al di sopra di WCAG AA — un promemoria per regolare il colore della superficie o l'opacità piuttosto che una supposizione.
Tutto viene eseguito localmente nel tuo browser mentre sposti i cursori — nessuno strumento di progettazione, nessun account e nulla viene inviato a un server. Copia il CSS direttamente nel tuo foglio di stile, scaricalo come file .txt o rimanda il risultato all'input per continuare a regolarlo.