Generátor CSS Box Shadow — Vizuální Nastavení Stínů

Box shadows dodávají UI prvkům hloubku. Vlastnost CSS box-shadow má několik parametrů, které se obtížně vizualizují v hlavě. Náš generátor umožňuje vizuální nastavení.

Syntaxe box-shadow

box-shadow: hoffset voffset rozmazání rozsah barva inset. Kladný horizontální offset = vpravo. Kladný vertikální offset = dolů. Rozmazání = velikost přechodu. Rozsah = rozšíření. Inset = stín dovnitř.

Vrstvení více stínů

CSS podporuje více box shadows oddělených čárkami. Díky tomu vytvoříte složité efekty: jemná vnější záře kombinovaná s subtilním vnitřním okrajem. Používejte maximálně 2–3 stíny — více vypadá uměle.

Realistické stíny

Dobré stíny konzistentně ukazují jedním světelným směrem. Material Design používá stíny na základě úrovní výšky. Jemné stíny (nízký offset, vysoké rozmazání, nízká průhlednost) vypadají profesionálněji než velké tmavé stíny.