Generátor CSS stínů

O generátoru stínů

Vlastnost CSS box-shadow přidává stínové efekty kolem rámu elementu. Můžete nastavit více efektů oddělených čárkami, každý s hodnotami offset-x, offset-y, blur-radius, spread-radius a barva.

Syntaxe CSS box-shadow

box-shadow: [inset] offset-x offset-y blur-radius spread-radius barva;

• offset-x / offset-y: Pozice stínu. Kladné hodnoty posouvají vpravo/dolů, záporné vlevo/nahoru.
• blur-radius: Čím větší hodnota, tím větší rozostření. 0 vytváří ostrou hranu.
• spread-radius: Kladné hodnoty rozšiřují stín, záporné ho zmenšují.
• barva: Jakákoliv CSS barevná hodnota. Použijte rgba() pro průhlednost.
• inset: Vykreslí stín uvnitř elementu.

Oblíbené styly stínů

• Měkký/Material: Velké rozostření, nízká průhlednost, mírně záporné šíření pro vznášející se karty.
• Tvrdý: Nulové rozostření vytváří retro efekt plného stínu.
• Neon: 0 posun s barevným stínem a vysokým šířením.
• Vrstvený: Více stínů se zvětšujícím se rozostřením vytváří realistickou hloubku.

Použijte předvolby pro rychlý start a pak doladějte posuvníky pro dokonalý vzhled.

Jak používat generátor CSS stínů

1. Upravte hodnoty posunu X a posunu Y pro umístění stínu. Kladné X posune stín doprava, záporné X doleva. Kladné Y posune stín dolů, záporné Y nahoru. Tyto hodnoty řídí směr zdroje světla.
2. Nastavte poloměr rozostření pro kontrolu měkkosti hran stínu. Hodnota 0 vytvoří ostrý stín s tvrdými hranami; vyšší hodnoty produkují stále difuznější, měkké stíny. Většina přirozeně působících stínů používá rozostření mezi 10px a 40px.
3. Nastavte poloměr šíření pro zvětšení nebo zmenšení stínu vzhledem k velikosti prvku. Kladné hodnoty dělají stín větší; záporné hodnoty ho dělají menší než prvek.
4. Zvolte barvu stínu a přepněte inset pro vytvoření efektu vnitřního stínu. Použijte živý náhled pro zobrazení změn v reálném čase a poté zkopírujte vygenerované CSS jedním kliknutím.

Principy CSS stínů (box-shadow)

Vlastnost CSS box-shadow přidává jeden nebo více stínových efektů do rámu prvku. Přijímá seznam stínů oddělených čárkami, z nichž každý je definován 2-4 délkovými hodnotami, volitelnou barvou a volitelným klíčovým slovem inset. Syntaxe je: box-shadow: [inset] posX posY rozostření šíření barva;. Hodnoty posunu jsou povinné; rozostření, šíření a barva jsou volitelné s výchozími hodnotami 0 pro rozostření, 0 pro šíření a aktuální barvou textu. Více stínů může být vrstveno oddělením každé definice čárkou, což umožňuje komplexní světelné efekty.

Stíny box-shadow jsou jedním z nejuniverzálnějších nástrojů v CSS pro vytváření hloubky a vizuální hierarchie. Běžné případy použití zahrnují stavy najetí myší na tlačítka (kde se stín objeví nebo prohloubí při interakci), zvýraznění karet v material designu (kde prvky s vyšším z-index vrhají větší, měkčí stíny), rozbalovací nabídky a modální okna (která se potřebují jevit jako vyzdvižená nad stránkou) a neumorfické návrhy UI (které používají spárované světlé a tmavé stíny pro simulaci vystoupení z povrchu). Klíčem k realistickým stínům je použití poloprůhledné černé (např. rgba(0,0,0,0.15)) namísto plné černé a sladění rozostření a posunu se zamýšleným směrem světla konzistentně napříč všemi prvky v rozhraní.

Výkon je důležitým aspektem při používání stínů box-shadow. Každý stín přidává kompoziční vrstvu, kterou musí prohlížeč vykreslit a udržovat. Animace vlastností box-shadow může být nákladná, protože prohlížeč překresluje stín na každém snímku. Pro plynulé animace 60fps zvažte animaci opacity na pseudoprvku místo toho nebo použití nápovědy will-change. Velké hodnoty šíření a velmi velké poloměry rozostření jsou nejdražší. Pro jednoduché efekty najetí a statické zvýraznění jsou stíny box-shadow výkonné a dobře optimalizované ve všech moderních prohlížečích.