Generátor box-shadow

Co je tento nástroj?

box-shadow je vlastnost CSS, která vykresluje stín za prvkem (nebo uvnitř něj). Při ručním psaní vyžaduje až pět hodnot v pořadí — vodorovný posun, svislý posun, poloměr rozostření, poloměr roztažení a barvu — plus volitelné klíčové slovo inset, což se snadno popletě nebo napoprvé vyjde příliš jemné nebo příliš silné.

Tento nástroj z toho dělá přímou manipulaci: přetáhněte posuvník, sledujte změnu stínu na živém náhledovém boxu a jakmile výsledek vypadá správně, zkopírujte přesné CSS. Výběr barvy plus posuvník průhlednosti automaticky vygenerují správnou hodnotu rgba(), protože průhledné stíny obvykle vypadají lépe než plně neprůhledné.

Proč ho používat?

• Živý náhled se okamžitě aktualizuje při úpravě libovolného ovládacího prvku — uvidíte přesný stín ještě předtím, než ho zapíšete do kódu.
• Plná kontrola nad posunem x, posunem y, rozostřením, roztažením, barvou a průhledností na jednom místě.
• Jedno kliknutí přidá vnitřní stín pro vpáčený/vhloubený vzhled místo plovoucího vrženého stínu.
• Výstupem je CSS připravené ke zkopírování, s barvou už převedenou na rgba() při vámi zvolené průhlednosti.
• Běží kompletně ve vašem prohlížeči — nic, co nastavíte, se nikam nenahrává.
• Zdarma, bez registrace, funguje i na mobilu.

Jak se používá

1. Nastavte posun-x a posun-y pro umístění stínu — kladné hodnoty ho posunou vpravo/dolů, záporné vlevo/nahoru.
2. Zvyšte poloměr rozostření pro změkčení okraje stínu; zvyšte roztažení, aby byl stín větší než samotný prvek.
3. Vyberte barvu a upravte průhlednost — nejrealističtější stíny používají 15-40% průhlednost místo plné černé.
4. Zaškrtněte „inset“, pokud chcete, aby se stín zobrazil uvnitř ohraničení prvku místo za ním.
5. Zkopírujte vygenerované CSS a vložte ho do vašeho stylopisu.

Příklad

Vstup

Posun: 0px, 10px · Rozostření: 20px · Roztažení: 0px · Barva: černá při 35% průhlednosti

Výstup

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Jemný stín přímo pod prvkem bez vodorovného posunu — jeden z nejběžnějších stylů stínu pro karty a tlačítka.

Jeden stín vs. vrstvené stíny

Tento nástroj vytváří jednu vrstvu stínu, což pokrývá naprostou většinu reálného použití — tlačítka, karty, modální okna a rozbalovací nabídky téměř vždy používají jeden stín. CSS podporuje více stínů oddělených čárkou na stejném prvku pro propracovanější efekty hloubky (například úzký, tmavý stín vrstvený pod měkkým, širokým), ale to je rafinace, kterou můžete přidat ručně: vygenerujte tu jeden stín, řádek zduplikujte, upravte druhou sadu hodnot a spojte je čárkou.

Běžné vzory box-shadow

• Jemné nadzvednutí karty: malý posun (0-4px), mírné rozostření (8-16px), 10-20% průhlednost černé.
• Zvýšené modální okno/rozbalovací nabídka: větší posun (4-10px) a rozostření (20-30px), 20-35% průhlednost pro silnější pocit vznášení.
• Vpáčené/vhloubené tlačítko: zaškrtněte inset, použijte malý posun a mírné rozostření tak, aby stín působil jako promáčknutí, ne jako nadzvednutí.
• Barevná záře: místo černé zvolte firemní barvu, zvyšte průhlednost na 40-60 % a mírně zvětšete roztažení pro jemný efekt záře kolem tlačítek.
• Ostrý/tvrdý stín: nastavte rozostření na 0 a roztažení na 0 pro pevnou, posunutou siluetu místo měkkého stínu.

Kombinace se zaoblenými rohy

Stíny a zaoblené rohy se používají dohromady neustále — karty, tlačítka a modální okna kombinují téměř vždy obojí. Použijte Generátor border-radius pro zaoblení rohů stejného prvku a aplikujte obě vygenerovaná CSS pravidla společně.

→ Generátor border-radius · Převodník jednotek

Časté dotazy