Generátor Box Shadow
Generátor stínů sestaví CSS box-shadow pomocí posuvníků pro posun X a Y, rozmazání, roztažení, barvu, průhlednost a inset, nabízí předvolby Material Design a Tailwind a vypíše přesné CSS.
O tomto nástroji
Generátor stínů sestaví CSS box-shadow pomocí posuvníků pro posun X a Y, rozmazání, roztažení, barvu, průhlednost a inset, nabízí předvolby Material Design a Tailwind a vypíše přesné CSS.
Jak ho použít
- Začni od předvolby, nebo ponech Vlastní.
- Uprav posun X/Y, rozmazání, roztažení a průhlednost.
- Vyber barvu stínu a pro vnitřní stín zaškrtni Inset.
- Klikni na Kopírovat CSS a vlož pravidlo box-shadow.
Dobré vědět
- Syntaxe box-shadow je: [inset] offset-x offset-y blur-radius spread-radius color.
- Větší poloměr rozmazání změkčí okraj; roztažení (spread) stín před rozmazáním zvětší nebo zmenší.
- Tmavé stíny s nízkým krytím (zhruba 10–25 %) vypadají přirozeněji než plná černá.
- Více stínů lze vrstvit oddělením čárkami.
- Klíčové slovo inset vykreslí stín uvnitř ohraničení prvku.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Jak v CSS přidám stín k divu?
Použij vlastnost box-shadow, například box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); tento nástroj ti hodnotu napíše.
Jaký je rozdíl mezi blur a spread?
Blur určuje, jak měkký je okraj stínu. Spread zvětší nebo zmenší stín ještě před použitím rozmazání.
Jak vytvořím vnitřní stín?
Přidej na začátek hodnoty klíčové slovo inset, nebo v nástroji zaškrtni Inset.
Můžu použít více stínů najednou?
Ano. Stíny odděl čárkami; vrstvené stíny, jako v předvolbách Material a Tailwind, vypadají realističtěji.