Home › Layout & Spacing › Shadow
Shadow
A soft blur behind an element to make it feel raised.
A shadow is a soft, dark area cast behind an element to suggest depth. It tells your eye that the element sits above the surface — like a card lifted off the page.
Shadows are subtle. Keep them low-opacity (around 5–15%) with a generous blur. A hard, dark shadow looks like a hole in the screen, not a lift.
Use shadow size to show how far an element is raised. A small, close shadow means low elevation — a button at rest. A large, soft shadow means high elevation — a modal floating over everything.