CSS Box Shadow Generator
Create smooth elevation and depth for modern cards, modals, and buttons.
Preview Box
Layer #1
X Offset: 0px
Y Offset: 10px
Blur: 15px
Spread: -3px
Layer #2
X Offset: 0px
Y Offset: 4px
Blur: 6px
Spread: -2px
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);How it works
Step 01
Adjust Sliders
Tune X, Y, Blur, and Spread for each layer.
Step 02
Add Layers
Add secondary layers for realistic ambient lighting.
Step 03
Copy Code
Copy the complete box-shadow rule.
Frequently Asked Questions
Stacking 2 or more subtle shadow layers creates much smoother, realistic depth than a single harsh shadow.
Related tools
CSS Gradient Generator
css-designDesign smooth linear and radial CSS gradients with live preview and copyable code.
PX to REM, EM & VW Converter
css-designConvert pixel values to REM, EM, and Viewport Width (VW) with custom base font sizes.
Color Converter
developerConvert colors between HEX, RGB, HSL, and OKLCH with live preview.