Jak používat

Začněte z předvolby nebo upravte posun, rozostření, rozšíření, barvu a krytí první vrstvy.
Přidejte další vrstvy pro přirozenější hloubku nebo zaškrtněte „Inset“ pro vnitřní stín.
Změňte pozadí náhledu a barvu boxu tak, aby odpovídaly vašemu návrhu, a poté zkopírujte CSS.

Jak to funguje

box-shadow přijímá pro každou vrstvu: vodorovné odsazení, svislé odsazení, poloměr rozostření, poloměr rozšíření a barvu, volitelně s předřazeným inset. Kladná odsazení posunou stín doprava a dolů. Rozostření změkčí hranu a nemůže být záporné; rozšíření stín před rozostřením zvětší (kladné) nebo zmenší (záporné). Více vrstev se odděluje čárkami a první se vykresluje navrchu.

Realistické vyvýšení obvykle kombinuje malý, těsný stín s větším a měkčím stínem s nízkou průhledností, což dělá předvolba „Elevated“. Barvy se zapisují jako rgba(), aby byla průhlednost explicitní. Stíny kopírují border-radius prvku a nezabírají místo v layoutu, takže nikdy neposunou ostatní prvky.

Stíny s velmi velkými hodnotami rozostření na mnoha prvcích mohou na méně výkonných telefonech zpomalit rolování. Pokud animujete stín, je obvykle plynulejší nechat zobrazit pseudoelement, který už stín má, než animovat samotný box-shadow.

Příklady

Karta na světlé stránce

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); dodá kartě ostrou hranu a jemné nadzvednutí.

Zaostřovací kroužek bez posunu layoutu

Vrstva s nulovým odsazením, nulovým rozostřením a rozšířením 3px v barvě značky nakreslí kolem tlačítka plný kroužek. Na rozdíl od ohraničení nezmění velikost prvku.

Zamáčknuté vstupní pole

inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) způsobí, že textové pole vypadá mírně zapuštěně.

Časté dotazy

Jaký je rozdíl mezi box-shadow a filter: drop-shadow()?

box-shadow sleduje box prvku a border-radius a podporuje rozšíření (spread) a vnitřní stín (inset). drop-shadow() sleduje viditelný tvar včetně průhledných oblastí obrázků PNG nebo SVG, ale nemá rozšíření ani vnitřní stín.

Proč je můj stín oříznutý?

Rodič s overflow: hidden ořízne vše mimo svůj box, včetně stínů. Přidejte rodiči padding nebo přesuňte pravidlo overflow.

Kolik vrstev bych měl použít?

Pro většinu rozhraní stačí jedna nebo dvě. Více vrstev může působit jemněji, ale jejich vykreslení je o něco náročnější, což hraje roli u dlouhých seznamů.

Soukromí

CSS se generuje ve vašem prohlížeči. Nic se neodesílá ani neukládá.