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.
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.
Č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.
Č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.