Dev Tool
CSS Box Shadow Generator
Build CSS box shadows interactively with live preview. Multiple layers, color picker, presets, and one-click copy.
🎨
CSS Box Shadow Generator
Live preview · Multiple layers · One-click copy
⚡Presets
🎛️Shadow Controls
25%
Off
👁️Live Preview
Preview
💻Generated CSS
Copy and paste into your stylesheet
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.25);
💡Box Shadow Tips
CSS Syntax
box-shadow: [inset] X Y blur spread color;- X/Y — offset direction
- Blur — softness (0 = sharp)
- Spread — size increase/decrease
- inset — inner shadow
Design Tips
- 🎯 Use negative spread with large blur for realistic depth
- 🎯 Stack 2–3 shadows for richer depth (light + dark)
- 🎯 Low opacity (0.08–0.15) looks most natural
- 🎯 Neumorphic: combine light + dark with offset in opposite directions
- 🎯 Glow effects: spread 0, zero offset, bright saturated color