Generátor CSS glasmorfizmu
Vytvárajte CSS pre panely s efektom rozmazaného skla alebo mäkké neuomorfné povrchy pomocou posúvačov bez kódovania.
Generátor CSS glasmorfizmu
Vytvorte kompletné CSS pravidlo pre panel s efektom rozmazaného skla alebo mäkký neuomorfný povrch bez ručného zadávania hodnôt. Zvoľte si glasmorfizmus pre priehľadnú kartu, ktorá rozmazáva obsah za ňou — vzhľad používaný v moderných dashboardoch, prihlasovaciach paneloch a modaloch — alebo neuomorfizmus pre povrch, ktorý sa zdá byť vytvarovaný z rovnakého materiálu ako jeho pozadie, s použitím páru protichodných mäkkých tieňov namiesto priehľadnosti.
Možnosti priamo mapujú vlastnosti, ktoré nástroj zapisuje. V režime skla kontrolujú priehľadnosť povrchu a sila rozmazania pozadie alfa a backdrop-filter blur, zatiaľ čo hrúbka okraja a jas okraja nastavujú tenký, semi-priehľadný okraj, ktorý udržiava čitateľnosť panelu pred zaneprázdnenými pozadiami. Vzdialenosť tieňa a mäkkosť tvoria tieň pod panelom a prepínač tvaru ho zmení na zapustený tieň pre ponorený efekt. V režime neuomorfizmu rovnaké hodnoty vzdialenosti a mäkkosti tieňa riadiacich svetlého tieňa a tmavého tieňa vypočítaného z vašej farby povrchu, vypuklého alebo zapusteného v závislosti od zvoleného tvaru. Zaokrúhlenie rohov a variant tmavého režimu sa vzťahujú na oba štýly.
Kedyže rozmazaný alebo mäkko tieňovaný povrch môže skončiť v stredtóne, ktorý je ťažko čitateľný s čiernym alebo bielym textom, nástroj kontroluje výsledný kontrast a pridáva krátky komentár upozornenia nad CSS, keď by ani jedna farba textu nedosahovala úroveň WCAG AA — podnecovanie na úpravu farby povrchu alebo priehľadnosti, nie na hádanie.
Všetko beží lokálne vo vašom prehliadači, keď posúvate posúvače — žiadny dizajnový nástroj, žiadny účet a nič sa neposlúcha na server. Skopírujte CSS priamo do svojho štýlu, stiahnite ho ako súbor .txt alebo odošlite výstup späť do vstupu, aby ste ho mohli naďalej upravovať.