Glassmorphism generátor: CSS efekty matného skla
Glassmorphism generátor vytvára CSS hodnoty pre efekty matného skla vrátane farebného odtieňa s alfou, rozmazania pozadia, okraja, zaoblenia a tieňa. Upravte dostupné možnosti, vygenerujte hodnoty a skontrolujte ich oproti pestrému gradientnému náhľadu. Výstup obsahuje deklaráciu backdrop-filter s predponou -webkit-, takže môžete CSS hodnoty skopírovať do svojho projektu.
Glassmorphism generátor vytvára CSS hodnoty pre efekty matného skla. Spája farebný odtieň s alfou, rozmazanie pozadia, svetlý okraj, zaoblenie a tieň a potom zobrazí výsledok v náhľade. Použite ho na preskúmanie sklenenej úpravy a skopírujte vygenerované hodnoty pre svoju prácu.
Nastavte dostupné možnosti a vygenerujte zásobník backdrop-filter. Náhľad leží na pestrkom gradiente, takže rozmazanie vidíte v kontexte, a vygenerované CSS obsahuje predponu -webkit-. Môžete vytvoriť dávku hodnôt namiesto vymýšľania každej jednotlivo a hodnoty sú správne náhodné.
CSS popisuje, ako má prehliadač efekt vykresliť, zatiaľ čo náhľad vám dáva vizuálny spôsob, ako skontrolovať vygenerovanú úpravu matného skla. Glassmorphism je užitočný, keď chcete, aby prvok vyzeral priesvitne a rozmazane voči tomu, čo je za ním. Generovanie CSS hodnôt môže poskytnúť východiskový bod pre dizajn, testovací fixture alebo seed dáta.
Glassmorphism generátor funguje úplne vo vašom prehliadači. Jeho vstup sa spracováva na vašom zariadení; nič sa nenahráva, neukladá ani neodosiela na server. Po načítaní stránky funguje bez pripojenia, takže ho môžete používať offline. Je užitočný pre vývojárov a DevOps inžinierov, ktorí chcú vytvárať, prehliadať alebo znovu používať CSS hodnoty matného skla.
Krok 1: Nastavte dostupné možnosti pre efekt matného skla, napríklad odtieň, rozmazanie, okraj, zaoblenie a tieň.
Krok 2: Vygenerujte hodnoty na vytvorenie zásobníka backdrop-filter pre váš dizajn.
Krok 3: Skontrolujte náhľad oproti jeho pestrému gradientnému pozadiu, aby ste videli, ako rozmazanie vyzerá.
Krok 4: Skopírujte potrebné CSS hodnoty vrátane deklarácie s predponou -webkit-.
Prípad použitia: Vytvorte hotové Glassmorphism hodnoty pre testy, fixture alebo seed dáta bez ručného písania každej hodnoty.
Prípad použitia: Vygenerujte naraz celú dávku hodnôt, keď potrebujete viacero štýlov matného skla.
Prípad použitia: Získajte správne náhodné hodnoty namiesto odhadov písaných na klávesnici.
Prípad použitia: Skúšajte rôzne kombinácie odtieňa, rozmazania, okraja, zaoblenia a tieňa pri tvorbe karty matného skla.
Prípad použitia: Skontrolujte rozmazanie oproti pestrému gradientu pri posudzovaní, ako môže sklenený efekt vyzerať na rôznych farbách.
Prípad použitia: Skopírujte vygenerované CSS hodnoty do projektu, keď potrebujete východiskový bod pre efekt matného skla.