Generátor CSS glasmorfismu
Vytvářejte CSS pro panely s efektem rozostřeného skla nebo měkké neomorfní povrchy pomocí posuvníků bez kódování.
Generátor CSS glasmorfismu
Vytvořte kompletní CSS pravidlo pro panel s efektem rozostřeného skla nebo měkký neomorfní povrch bez ručního zadávání hodnot. Zvolte si glasmorfismus pro transparentní kartu, která rozostřuje obsah za ní — vzhled používaný v moderních přístrojích, přihlašovacích panelech a modálech — nebo neomorfismus pro povrch, který vypadá, že je vytvarován z téhož materiálu jako jeho pozadí, s použitím páru opačných měkkých stínů místo průhlednosti.
Možnosti přímo mapují vlastnosti, které nástroj zapisuje. V režimu skla řídí průhlednost povrchu a síla rozostření pozadí alfa a backdrop-filter blur, zatímco tloušťka ohraničení a jas ohraničení nastavují tenké, semi-průhledné okraje, které udržují čitelnost panelu před rušivými pozadími. Vzdálenost stínu a měkkost tvoří stín pod panelem a přepínač tvaru jej změní na zapuštěný stín pro zanuřený efekt. V režimu neomorfismu stejné hodnoty vzdálenosti a měkkosti stínu řídí světlý a tmavý stín vypočítaný z vaší barvy povrchu, vypouklý nebo zapuštěný v závislosti na zvoleném tvaru. Zaoblení rohů a varianta tmavého režimu se vztahují na oba styly.
Pokud rozostřený nebo měkko stínovaný povrch skončí v středním tónu, který je obtížně čitelný s černým nebo bílým textem, nástroj kontroluje výsledný kontrast a přidává krátký komentář varování nad CSS, když by ani jedna barva textu nedosáhla úrovně WCAG AA — podnět k úpravě barvy povrchu nebo průhlednosti místo hádání.
Všechno běží lokálně ve vašem prohlížeči, když posunujete posuvníky — žádný design tool, žádný účet a nic se neodesílá na server. Zkopírujte CSS přímo do své stylů, stáhněte si jej jako soubor .txt nebo odešlete výstup zpět na vstup, abyste jej mohli nadále upravovat.