Elevation
Shadows give Convert's surfaces depth without clutter, a small, deliberate set that lifts cards, frames and stats just enough to separate them from the page.
Shadows
Five elevation tokens cover every raised surface. Each box below renders its own shadow.
logo-card
card
card-lift
frame
stat
Usage
Reference the token in code. Values below are the source of truth from tokens.css.
| Token | Value | Usage |
|---|---|---|
--shadow-logo-card |
0 4px 16px rgba(99,102,241,0.08), 0 1px 4px rgba(99,102,241,0.04) |
Soft tinted lift on logo cards |
--shadow-card |
0 8px 24px rgba(0,0,0,0.08) |
Default resting card shadow |
--shadow-card-lift |
0 8px 24px rgba(0,0,0,0.08) |
Cards lifted on hover |
--shadow-frame |
0 22px 56px rgba(42,52,66,0.16) |
Browser, video and screenshot frames |
--shadow-stat |
0 16px 48px rgba(99,102,241,0.22), 0 2px 10px rgba(99,102,241,0.10) |
Violet-tinted stat cards |