CSS box-shadow generátor
Vygeneruj hodnotu CSS box-shadow z posunutí, rozostření, rozprostření a barvy s více vrstvami a předvolbami.
CSS box-shadow generátor
Upravuj horizontální a vertikální posun, poloměr rozostření, poloměr rozprostření a barvu, a tento nástroj skládá odpovídající deklaraci box-shadow během práce. Je určen pro běžné případy — kartu, tlačítko, modální okno, které se musí zdvihnout ze stránky — stejně jako pro vrstvené stíny vytvořené z více stínů navrstvených dohromady, techniku za měkkým, realistickým hloubkou používanou ve většině moderních návrhových systémů.
Rolovací nabídka Předvolba nabízí jemné, střední a silné zvýšení, každé se svým počtem vrstev, posun a rozostření již vyladěné; vyberte Vlastní pro řízení každé hodnoty sami. Volba Vrstvy řídí, kolik stínů je naskládáno: každá přidaná vrstva zvyšuje posun a rozostření podle svého indexu a snižuje její neprůhlednost, čímž změní jeden plochý stín na měkký, přesvědčivý. Vnitřní překlopí stín dovnitř pro stisknuté prvky, neprůhlednost řídí, jak silně se barva čte, a přepínač jednotky dává px nebo rem. Zapněte variantu pro tmavý režim pro druhou, silnější deklaraci zabalenou v bloku @media (prefers-color-scheme: dark) — stín potřebuje vyšší neprůhlednost, aby zůstal viditelný na tmavém pozadí. Vyberte, zda výsledek vyjde jako jeden řádek, vlastnost --box-shadow nebo třída .box-shadow, a přidejte odpovídající řádek filter: drop-shadow pro prvky, které box-shadow nemůže dosáhnout, jako je ikona SVG nebo PNG s průhledností.
Každá hodnota je omezena na rozumný rozsah, a neznámá barva se vrátí na černou místo nefunkčního CSS, takže výstup vždy čistě přilne do stylového listu.
Všechno běží v tvém prohlížeči, když upravuješ ovládací prvky — žádná barva ani vygenerované CSS se nikdy nikam nešíří. Zkopíruj výsledek, stáhni ho jako soubor .txt nebo ho pošli do jiného nástroje, abys s ním pokračoval v práci.