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.
Multi-Layer Smooth Shadow Curve Generator
Generate natural ambient physics shadows via exponential power decay curves (Tobias Ahlin & Florian Kiem physics model).
Layer Physics Power Decay Curve
Generates 6 smooth exponential shadow layers dynamically.
Live UI Surface Test Bench
Evaluate depth performance on real components & copy production CSS.
Real-World Surface Previews
Elevated Feature Card
Multi-layer shadow test container.
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 50+ 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 ideal 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
Vibrant purple halo glow creating high-impact focus for 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.