Generatore di vetromorfismo CSS

Il generatore di vetromorfismo CSS è un editor visivo per lo stile dell'interfaccia utente in vetro smerigliato, dove una superficie traslucida sfoca tutto ciò che si trova dietro di esso. Puoi regolare la sfocatura dello sfondo, il riempimento di trasparenza, la saturazione, il colore della tinta e il raggio dell'angolo con i cursori, guardare un aggiornamento in anteprima su uno sfondo colorato e copiare il CSS esatto che produce.

Il vetromorfismo si basa sulla proprietà del filtro di sfondo, che applica una sfocatura al contenuto dietro un elemento piuttosto che all'elemento stesso. Combinato con uno sfondo semitrasparente, un bordo sottile e un'ombra morbida, produce l'aspetto del vetro stratificato reso popolare dai moderni sistemi operativi. Ottenere il bilanciamento giusto a mano è complicato, quindi questo strumento gestisce ogni valore e produce un blocco pulito e copiabile.

Tutto viene eseguito nel browser Scegli un preset come Frosted, Dark o Vibrant, perfeziona i cursori e copia il CSS, incluso il filtro di sfondo con prefisso webkit per un supporto più ampio Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.

L'effetto dipende da due proprietà che lavorano insieme e fallisce silenziosamente se manca una delle due. Il filtro a goccia sfuma tutto ciò che si trova dietro l'elemento, quindi ha bisogno di un colore di sfondo parzialmente trasparente da mostrare: a piena opacità non c'è nulla da vedere e senza sfondo scompare. Ha bisogno anche di qualcosa dietro che valga la pena sfocare, motivo per cui l'effetto sembra un pannello piatto su uno sfondo semplice e si anima su una fotografia. Due costi pratici La sfocatura dello sfondo è una delle cose più costose da comporre, in particolare su un'ampia area o durante lo scorrimento. E il testo su una superficie traslucida ha un rapporto di contrasto che cambia con qualunque cosa passi sotto, quindi può passare un controllo di contrasto su uno sfondo e fallire su un altro.

Come generatore CSS di glassmorphism, parte dal preset Frosted, e il blocco copiato per quel preset recita: sfondo: rgba (255, 255, 255, 0.2); filtro di sfondo: blur (10px) saturato (120%); di nuovo lo stesso valore di - webkit-backdrop-filter; bordo-raggio: 16px; bordo: 1px solido rgba (255, 255, 255, 0.18); e box-shadow: 0 8px 32px rgba (0, 0, 0, 0, 0.12). Click Dark e lo sfondo cambia in rgba (15, 23, 42, 0.25) con un blurx 12px, che è la versione da utilizzare su una foto.