CSS Box Shadow Generátor

CSS Output

Co je CSS Box Shadow?

Vlastnost CSS box-shadow přidává efekty stínu kolem rámečku prvku. Stíny mohou být posunuty, rozostřeny, rozšířeny, zbarveny a nastaveny jako inset (vnitřní stín). Více stínů oddělených čárkami může být vrstveno pro bohaté efekty. Tento generátor vám umožňuje vizuálně sestavit komplexní vícevrstvé stíny a zkopírovat hotový CSS do schránky.

Jak používat Generátor Box Shadow

Upravte posuvníky pro Offset X/Y, Blur a Spread pro umístění a tvarování stínu.
Klikněte na barevný vzorek pro výběr barvy stínu a použijte posuvník Opacity pro průhlednost.
Přepněte 'Inset' pro vytvoření vnitřního záře nebo efektu stisknutí.
Klikněte na '+ Přidat vrstvu' pro vrstvení více stínů na sebe.
Zkopírujte vygenerovaný CSS a vložte ho do svého stylopisu.

Často Kladené Otázky

Jaký je rozdíl mezi box-shadow a filtrem drop-shadow? box-shadow přidává stíny kolem obdélníkového okraje prvku a podporuje vnitřní stíny. CSS filtr: drop-shadow() se aplikuje na vizuální tvar prvku (včetně průhlednosti), takže sleduje neoddělitelné obrysy, například PNG s transparentním pozadím.

Jak vytvořím efekt zvýšení karty Material Design? Stohujte dva stíny krabice: měkký okolní stín (velké rozmazání, nízká neprůhlednost, mírně rozprostřeno) a hlavní stín (menší rozmazání, vyšší neprůhlednost, směrové posunutí). Například: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Ovlivňuje box-shadow rozvržení stránky? Ne. box-shadow neovlivňuje velikost ani polohu prvku v toku dokumentu. Na rozdíl od obrysu nezabírá místo v rozložení a neposune jiné prvky.

Mohu animovat box-shadow? Ano. box-shadow je animovatelný pomocí CSS přechodů a animací. Kvůli výkonu preferujte přechodování box-shadow pouze v případě potřeby — prohlížeče nemohou urychlit změny box-shadow GPU tak efektivně jako transform nebo opacity.

Keywords: CSS box shadow generátor, box-shadow CSS, CSS nástroj stínů, CSS drop shadow, vnitřní stín, vícevrstvý stín, CSS shadow online