CSS Box Shadow Generator
Build multi-layer box shadows visually.
Layer 1
Generated CSS
.box {
box-shadow: 0px 10px 20px 0px #00000040;
}Generate CSS Box Shadows
The box-shadow property adds depth and elevation to elements. This generator lets you stack multiple shadow layers â each with its own offset, blur, spread, color, and inset â and copies the exact CSS, so you can craft anything from a subtle card lift to a soft, layered glow.
The five values
- X / Y offset â shadow direction
- Blur â softness of the edge
- Spread â grows or shrinks the shadow
- Color â usually a semi-transparent black
- Inset â draws the shadow inside the box
Layering tip
Realistic shadows stack two or three layers â a tight, dark one near the element and a wider, softer one further out. Add layers to build that natural depth.
Private & Processed Locally
The CSS is generated in your browser; nothing is uploaded.
Frequently Asked Questions
Common questions about the CSS Box Shadow Generator.
Can I stack multiple shadows?
Yes, add as many shadow layers as you need; realistic depth often uses two or three.
What does inset do?
Inset draws the shadow inside the element instead of outside, for a recessed look.
Is it private?
Yes, the CSS is generated in your browser.