Shadows
Documentation and examples for the shadow system. Provides 7 elevation levels using consistent dark gray tints for depth and hierarchy.
Shadow Comparison
Compare all shadow levels side by side to choose the right elevation for your design.
Shadow Scale
The shadow system provides 7 elevation levels, from subtle (xs) to dramatic (3xl). All shadows use a consistent dark gray tint for a unified look.
Extra Small
shadows.xsSubtle shadow for buttons and small elements
0px 1px 2px rgba(16, 24, 40, 0.05)Small
shadows.smCards, dropdowns, tooltips
0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06)Medium
shadows.mdModals, popovers, elevated cards
0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)Large
shadows.lgDialogs, floating panels
0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)Extra Large
shadows.xlHero sections, featured cards
0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03)2X Large
shadows.2xlProminent overlays
0px 24px 48px -12px rgba(16, 24, 40, 0.18)3X Large
shadows.3xlMaximum elevation, dramatic effect
0px 32px 64px -12px rgba(16, 24, 40, 0.14)Usage Guidelines
Recommended use cases for each shadow level to maintain visual hierarchy.
| Level | Recommended Usage | Example |
|---|---|---|
xs | Buttons, input focus states, subtle depth | Button hover, form inputs |
sm | Cards, dropdowns, tooltips | Card components, menu dropdowns |
md | Elevated cards, popovers, sticky headers | Featured cards, popover menus |
lg | Modals, dialogs, floating panels | Modal dialogs, sidebar overlays |
xl | Hero sections, prominent elements | Feature highlights, image galleries |
2xl | Full-screen overlays, lightboxes | Lightbox overlays, focus states |
3xl | Maximum elevation, dramatic effect | Onboarding spotlights, presentation mode |