Při přidávání jemné elevation pro card komponentu. Při reprodukci Material Design nebo iOS-like stínu. Layered shadow pro realističtější vizuál (multiple layers s různým blurem). Inset stín pro dojem „zasazení" elementu (např. input field).

Blur ≠ spread. Blur jemně rozmazává stín. Spread rozšiřuje (nebo zmenšuje při záporné hodnotě) plochu stínu před blurem. Velký blur je drahý. Na mobilu se silně rozmazaný stín může projevit na výkonu během scrollu. Z-fighting na hranách. Při tmavém pozadí použij světlejší nebo poloprůhledný stín. Inset vs. outset. inset klíčové slovo přepne stín dovnitř elementu. Multi-layer pořadí. První stín v seznamu kreslí nad ostatními — pořadí záleží.

Generátor CSS box-shadow

Postav single nebo multi-layer CSS box shadows vizuálně. Uprav offset, blur, spread, barvu a zkopíruj CSS.

Shadow layers

Preview

Sample

CSS

Vytvořil JXXR1 · ♥ Sponzorovat · ☕ Kup mi kávu

K čemu to slouží?

CSS box-shadow má syntax offset-x offset-y blur spread color a může být multi-layer (přes čárku seznam stínů). Vizuálně ladit tato čísla v editoru je únavné. Tenhle generátor ti dá slidery na offset, blur, spread a color picker — nakonec zkopíruješ CSS, které můžeš rovnou vložit.

Kdy to použít

Při přidávání jemné elevation pro card komponentu.
Při reprodukci Material Design nebo iOS-like stínu.
Layered shadow pro realističtější vizuál (multiple layers s různým blurem).
Inset stín pro dojem „zasazení" elementu (např. input field).

Časté chyby

Blur ≠ spread. Blur jemně rozmazává stín. Spread rozšiřuje (nebo zmenšuje při záporné hodnotě) plochu stínu před blurem.
Velký blur je drahý. Na mobilu se silně rozmazaný stín může projevit na výkonu během scrollu.
Z-fighting na hranách. Při tmavém pozadí použij světlejší nebo poloprůhledný stín.
Inset vs. outset. inset klíčové slovo přepne stín dovnitř elementu.
Multi-layer pořadí. První stín v seznamu kreslí nad ostatními — pořadí záleží.