Shadows & depth design hub
Depth looks simple until it looks cheap. Layer soft and sharp shadows, see them on cards and glass, then copy CSS that actually holds up.
Interactive shadows & depth studio
Configure multi-layer box shadows, exponential decay physics, drop-shadow filters, and export CSS or Tailwind v4 tokens.
Smooth shadow curve
Several soft layers whose offset, blur and opacity follow a power curve, so the shadow fades out instead of ending in a hard edge.
| # | Y | Blur | Spread | Alpha |
|---|---|---|---|---|
| 1 | 2px | 2px | 0px | 0.02 |
| 2 | 7px | 9px | -1px | 0.02 |
| 3 | 17px | 22px | -2px | 0.02 |
| 4 | 33px | 41px | -4px | 0.03 |
| 5 | 54px | 67px | -7px | 0.03 |
| 6 | 80px | 100px | -10px | 0.04 |
Live preview
Check the shadow on both light and dark pages.
Elevated card
Updated just now
.elevated-surface {
box-shadow:
0px 2px 2px 0px rgba(15, 23, 42, 0.02),
0px 7px 9px -1px rgba(15, 23, 42, 0.02),
0px 17px 22px -2px rgba(15, 23, 42, 0.02),
0px 33px 41px -4px rgba(15, 23, 42, 0.03),
0px 54px 67px -7px rgba(15, 23, 42, 0.03),
0px 80px 100px -10px rgba(15, 23, 42, 0.04);
}Curated Elevation & Depth Directory
Explore 24 production-ready box shadows, ambient light layers, glassmorphism panels, and neon glow presets. Click any preset to load into the studio.
Elevation Level 1 (Subtle)
Material & Elevation • 2 layers
Material Design 3 Level 1 shadow for resting cards and subtle container separation.
Elevation Level 2 (Elevated)
Material & Elevation • 2 layers
Material Design 3 Level 2 shadow for hovered cards, active pills, and floating action buttons.
Elevation Level 3 (Dropdown)
Material & Elevation • 2 layers
Medium elevation shadow for select dropdowns, context menus, and tooltips.
Elevation Level 4 (Modal Sheet)
Material & Elevation • 2 layers
Pronounced depth shadow for mobile bottom sheets, drawer sidebars, and dialog modals.
Elevation Level 5 (Overlay Peak)
Material & Elevation • 2 layers
Maximum depth shadow reserved for full-screen dialogs and topmost floating overlays.
Tailwind shadow-sm
Material & Elevation • 1 layer
Standard Tailwind CSS shadow-sm utility for tight UI borders.
Tailwind shadow-md
Material & Elevation • 2 layers
Standard Tailwind CSS shadow-md utility with key & ambient layers.
Tailwind shadow-lg
Material & Elevation • 2 layers
Standard Tailwind CSS shadow-lg utility for elevated feature cards.
Tailwind shadow-xl
Material & Elevation • 2 layers
Standard Tailwind CSS shadow-xl utility for floating action windows.
Tailwind shadow-2xl
Material & Elevation • 1 layer
Standard Tailwind CSS shadow-2xl utility for ultra-deep hero mockups.
Stripe Ultra-Smooth Layers
Soft & Ambient • 4 layers
Signature 5-layer ultra-smooth ambient drop shadow used by Stripe design systems.
Natural Ambient Diffused
Soft & Ambient • 1 layer
Broad, soft ambient blur shadow mimicking natural outdoor sky lighting.
Indigo Brand Tint Shadow
Soft & Ambient • 1 layer
Subtle brand-colored shadow layer adding depth and color harmony to UI elements.
Soft Bottom Shelf Glow
Soft & Ambient • 1 layer
Downward-focused ambient glow creating a shelf effect under cards.
Apple Fluid Depth
Soft & Ambient • 2 layers
Refined dual-layer shadow inspired by macOS Big Sur & iOS card depth.
Frosted Glass Light Card
Glassmorphism • 2 layers
Light mode glassmorphic card with translucent background, blur, and subtle border depth.
Dark Luminous Glass Panel
Glassmorphism • 2 layers
Sleek dark mode glass card with subtle white specular edge highlight.
Glass Card Accent Border
Glassmorphism • 2 layers
Frosted glass container with a primary accent glow along the perimeter.
Cyber Neon Cyan Aura
Glow & Neon • 2 layers
Electric cyan neon aura for cyberpunk aesthetics, badge highlights, and active states.
Purple Violet Halo Glow
Glow & Neon • 2 layers
Electric purple halo glow for high-impact focus on feature elements.
Emerald Success Glow
Glow & Neon • 1 layer
Luminous emerald green glow for online status dots and verification badges.
Neumorphic Embossed Button
Neumorphic & Inset • 2 layers
Dual light/dark shadow pair creating an embossed physical soft plastic button.
Neumorphic Debossed Input
Neumorphic & Inset • 2 layers
Dual inner inset shadow creating a recessed pressed-in field for text inputs.
Dark Neumorphic Soft Card
Neumorphic & Inset • 2 layers
Dark mode dual-light soft plastic depth for sleek audio controls and synth dials.