CSS Box Shadow Generator
Build multi-layer box shadows visually and copy the CSS in one click. Start from a preset or add layers manually. Nothing uploaded.
Live preview
CSS output
Save to library
Learn more: Multi-layer shadows and preset design systems
Why multi-layer shadows look more realistic
Real objects cast multiple shadows - a sharp, dark shadow close to the object and a softer, larger ambient shadow further away. CSS box-shadow supports multiple comma-separated layers, but most generators only expose one. The difference between single and two-layer shadows is immediately visible: one layer looks flat; two layers create depth.
Material Design elevation levels
Material Design specifies eight elevation levels (1-8), each with a specific two-layer shadow combination that simulates the appearance of a surface at a given height above the page. The calculator includes all eight as presets with the exact shadow values from the Material Design specification.
Neumorphism and soft UI presets
Neumorphism (soft UI) uses two box shadows - one light and one dark - to make UI elements appear extruded from the background. The calculator includes a neumorphism preset that generates the correct two-shadow combination automatically, plus soft UI and dramatic presets for hero cards.
Multi-layer workflow
Load a preset and adjust from there rather than starting from zero. Adjust each shadow layer with sliders for X/Y offset, blur, and spread. Use the color picker and opacity slider to fine-tune. Add or remove layers freely, then copy the CSS to clipboard.
Frequently asked questions
Neumorphism uses two box shadows (one light, one dark) to make elements appear extruded from the background. The calculator includes a preset that generates the correct two-shadow combination automatically.
Separate multiple shadows with commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08). The calculator outputs the ready-to-paste CSS.
Material Design has 8 elevation levels each with a specific two-layer shadow that simulates a surface height above the page. All 8 are available as presets with exact specification values.