CSS box-shadow generátor
Vygeneruj CSS box-shadow hodnotu z posunu, rozmazania, rozšírenia a farby s viacerými vrstvami a predvoleným nastavením.
CSS box-shadow generátor
Upravuj horizontálny a vertikálny posun, polomer rozmazania, polomer rozšírenia a farbu, a tento nástroj skladá zodpovedajúcu deklaráciu box-shadow počas práce. Je určený na bežné príklady — kartu, tlačidlo, modálne okno, ktoré sa musí zdvihnúť zo stránky — ako aj na vrstvené tiene vytvorené z viacerých tieňov navrstených na sebe, techniku za mäkkou, realistickou hĺbkou používanou vo väčšine moderných návrhových systémov.
Rozbaľovací panel Predvolené nastavenie ponúka jemné, stredné a silné prevedenie, každé s vlastným počtom vrstiev, posunu a rozmazaním už doladením; vyberte Vlastné na riadenie každej hodnoty sami. Možnosť Vrstvy riadi, koľko tieňov je naskladaných: každá pridaná vrstva zvyšuje posun a rozmazanie podľa svojho indexu a znižuje jej priehľadnosť, čím zmení jeden plochý tieň na mäkký, presvedčivý. Vnútri prevracia tieň dovnútra pre stlačené prvky, priehľadnosť riadi, ako silne sa farba číta, a prepínač jednotky dáva px alebo rem. Zapnite variant pre tmavý režim na druhú, silnejšiu deklaráciu založenú v bloku @media (prefers-color-scheme: dark) — tieň potrebuje vyššiu priehľadnosť, aby zostal viditeľný na tmavom pozadí. Vyberte, či výsledok vyjde ako jeden riadok, vlastnosť --box-shadow alebo trieda .box-shadow, a pridajte zodpovedajúcu čiaru filter: drop-shadow pre prvky, ktoré box-shadow nemôže dosiahnuť, ako je ikona SVG alebo PNG s priehľadnosťou.
Každá hodnota je obmedzená na rozumnú škálu, a neznáma farba sa vráti na čiernu namiesto rozbiteného CSS, takže výstup vždy čisto prilepuje do štýlového hárka.
Všetko beží v tvojom prehliadači, keď upravuješ ovládacie prvky — žiadna farba ani vygenerovaný CSS sa nikdy nikam nešíre. Skopíruj výsledok, stiahni ho ako súbor .txt alebo ho pošli do iného nástroja, aby si s ním pokračoval v práci.