Shadows
Shadows add depth, indicating elevation, layering, and separation between UI elements.
Published: Last updated:
Overview
Shadows offer visual cues about depth, movement, and surface edges. Their appearance is influenced by a surface’s elevation and its relationship to other layers. Each component has an appropriate shadow applied by default.
When to use
- Shadows should only be used when a component is intentionally elevated above the surrounding UI.
- Use elevation purposefully, reserve heavier shadows for higher layers (like dialogs) and lighter shadows for tooltips or toasts.
- Shadows should draw attention to key components like modals, dropdowns, or tooltips without overwhelming the interface.
When not to use
- Too many shadows (or overly strong ones) can clutter the interface or make it feel heavy and inconsistent.
$shadow-xs
0 1px 3px 0 rgb(26 26 26 / 0.1),
0 1px 2px -1px rgb(26 26 26 / 0.1);
$shadow-sm
0 4px 6px -1px rgb(26 26 26 / 0.1),
0 2px 4px -2px rgb(26 26 26 / 0.1);
$shadow-md
0 10px 15px -3px rgb(26 26 26 / 0.1),
0 4px 6px -4px rgb(26 26 26 / 0.1);
$shadow-lg
0 20px 25px -5px rgb(26 26 26 / 0.1),
0 8px 10px -6px rgb(26 26 26 / 0.1);
$shadow-xl
0 25px 50px -12px rgb(26 26 26 / 0.25);