CSS box-shadow generátor
Vytvářejte hodnoty box-shadow vizuálně. Nastavte vodorovné a svislé odsazení v pixelech, poloměr rozostření (měkký okraj), roztažení (zvětšení nebo zmenšení stínu před rozmazáním), barvu, krytí a volitelnou vložku pro vnitřní stíny. Okno náhledu se aktualizuje živě; zkopírujte úplnou deklaraci box-shadow do svého CSS. Pochopte, jak každý parametr mění nadmořskou výšku a hloubku bez pokusů a omylů v devtools.
X (px)
Y (px)
Rozostření (px)
Rozptyl (px)
Barva
Krytí (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
Jak vytvořit rámeček stínu
1. Nastavte X a Y offset — kladné X posouvá stín doprava, kladné Y jej posouvá dolů.
2. Upravte rozostření (měkkost) a roztažení (velikost před rozmazáním).
3. Vyberte barvu stínu a krytí.
4. Přepněte vložení, pokud se má stín objevit uvnitř rámečku; kopírovat CSS.
Recepty stínů
Měkká výška karty
offsetY 8px, rozostření 24px, rozostření 0, černá při 18% krytí — plovoucí karta ve stylu materiálu: box-shadow: 0 8px 24px rgba(20,20,20,0,18).
Ostrý vržený stín
rozostření 0, rozpětí 0, odsazení Y 4px — tvrdý okraj jako nálepka mírně zvednutá ze stránky.
Stisknuté tlačítko vložení
Povolit vložení s malým rozmazáním — simuluje stisknutý nebo zapuštěný ovládací prvek uvnitř prvku.
Kdy tento nástroj použít
• Když ladíte hloubku uživatelského rozhraní pro karty, modály a tlačítka.
• Když se naučíte, jak se rozostření liší od rozostření.
• Když dokumentujete tokeny návrhu s přesnými hodnotami stínu.
Kdy zvolit něco jiného
• Pokud potřebujete více naskládaných stínů — zkopírujte první vrstvu sem a poté přidejte další v CSS.
• Když chcete text-shadow — jiná vlastnost s podobnou syntaxí.
• Když potřebujete vržený stín na nepravidelné tvary PNG — filtr: vržený stín() může fungovat lépe.
Čtení čtyř čísel
box-shadow: 0 8px 24px 0 znamená x=0, y=8px dolů, rozostření=24px, rozprostření=0. Vynechat spread a výchozí spread prohlížečů na 0. Velké rozostření s nulovým posunem vytváří záři; velký posun s malým rozostřením vytváří směrové světlo.
Vrstvení stínů
Více stínů oddělených čárkou: box-shadow: 0 1px 2px rgba(0,0,0,0,1), 0 4px 12px rgba(0,0,0,0,15); První stínové barvy pod pozdějšími. Zkombinujte úzký tmavý stín se širokým světlým stínem pro realistickou hloubku.
Dostupnost a výkon
Silné stíny na velkých animovaných plochách mohou stát čas malování GPU. U uživatelských rozhraní s vysokou hustotou dat upřednostňujte jemné stíny. Zajistěte, aby zaostřené prvky zůstaly viditelné — nespoléhejte se pouze na stíny, aby ukázaly stav; pár s okrajem nebo obrysem pro uživatele klávesnice.
Časté dotazy
Jaká je syntaxe box-shadow?
box-shadow: offset-x offset-y blur-radius spread-radius color; Volitelné klíčové slovo vložené vytváří vnitřní stín.
Rozmazání vs. šíření?
Rozostření změkčí okraje stínu. Spread rozšiřuje nebo stahuje tvar stínu před rozmazáním — pozitivní spread zvětšuje, negativní zmenšuje.
Jaké jednotky mám použít?
Tento nástroj generuje obrazové body (px), což je nejběžnější volba pro stíny uživatelského rozhraní obrazovky.
Co dělá vložka?
Vložení vykreslí stín uvnitř rámečku ohraničení prvku — užitečné pro zapuštěné vstupy nebo jamky.
Může být barva stínu poloprůhledná?
Ano. Krytí je aplikováno na vybranou barvu a vytváří výstup rgba pro hladké okraje na různých pozadích.
Jsou hodnoty odesílány na server?
Ne. Náhled a CSS jsou místní.
Je to zdarma?
Ano, není potřeba žádný účet.