Elevation System
Shadows create a sense of depth and hierarchy. Higher elevations indicate elements that are “closer” to the user, like modals and dropdowns.
0
1
2
3
4
5
6
Shadow Levels
Elevation 0
None
- Class Name
- shadow-none
- Elevation Level
- 0 / 6
Usage Context
Flush surfacesReset elevation
Common Examples
- •Background elements
- •Flat UI components
CSS Value:
box-shadow: noneElevation 1
Small
- Class Name
- shadow-sm
- Elevation Level
- 1 / 6
Usage Context
Subtle elevationMinimal depth
Common Examples
- •Input fields
- •Small badges
- •Subtle dividers
CSS Value:
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)Elevation 2
Base
- Class Name
- shadow
- Elevation Level
- 2 / 6
Usage Context
Default cardsStandard elevation
Common Examples
- •Card components
- •List items
- •Product cards
CSS Value:
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)Elevation 3
Medium
- Class Name
- shadow-md
- Elevation Level
- 3 / 6
Usage Context
Raised cardsHover states
Common Examples
- •Hovered cards
- •Dropdown triggers
- •Tabs
CSS Value:
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)Elevation 4
Large
- Class Name
- shadow-lg
- Elevation Level
- 4 / 6
Usage Context
DropdownsPopoversRaised content
Common Examples
- •Dropdown menus
- •Context menus
- •Tooltips
CSS Value:
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)Elevation 5
Extra Large
- Class Name
- shadow-xl
- Elevation Level
- 5 / 6
Usage Context
ModalsDialogsTop-level overlays
Common Examples
- •Modal dialogs
- •Lightbox
- •Overlays
CSS Value:
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)Elevation 6
2XL
- Class Name
- shadow-2xl
- Elevation Level
- 6 / 6
Usage Context
Maximum elevationDramatic depth
Common Examples
- •Full-screen modals
- •Important notifications
CSS Value:
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)Interactive Shadow Effects
Use hover shadows to provide visual feedback on interactive elements.
Card Hover
Lift cards on hover for interactive feedback
Hover Me
shadow hover:shadow-lgButton Elevation
Subtle shadow adds depth to buttons
Hover Me
shadow-sm hover:shadow-mdImage Card
Gallery images with lifting hover effect
Hover Me
shadow-md hover:shadow-xlCode Examples
Basic Card with Shadow
// Standard card with base shadow
<div className="bg-surface-1 border rounded-xl shadow p-6">
<h3 className="text-lg font-semibold text-foreground mb-2">
Card Title
</h3>
<p className="text-neutral-strong">
Card content with default elevation
</p>
</div>Interactive Card with Hover
// Card that lifts on hover
<div className="bg-surface-1 border rounded-xl shadow hover:shadow-lg
transition-shadow duration-200 cursor-pointer p-6">
<h3 className="text-lg font-semibold text-foreground mb-2">
Interactive Card
</h3>
<p className="text-neutral-strong">
Hover to see elevation change
</p>
</div>Modal Dialog with Maximum Elevation
// Modal with highest shadow level
<div className="fixed inset-0 flex items-center justify-center
bg-black/50 z-50">
<div className="bg-surface-1 rounded-2xl shadow-2xl max-w-lg w-full
mx-4 p-8">
<h2 className="text-h2 text-foreground mb-4">
Modal Title
</h2>
<p className="text-neutral-strong">
Modal content with maximum elevation
</p>
</div>
</div>Best Practices
Do This
- ✓Use shadows to indicate interactive elements
- ✓Increase shadow on hover for feedback
- ✓Use higher elevation for modals and overlays
- ✓Combine with transition-shadow for smooth animations
Do not Do This
- ✗Avoid using shadows on every element
- ✗Do not use shadow-2xl for standard cards
- ✗Never use custom shadow values outside the system
- ✗Avoid conflicting shadows on nested elements