CSS Box Shadow Generator
Layer as many box shadows as you like with a live preview, then copy the finished CSS in one click.
Runs entirely in your browser, nothing is uploadedLayer a shadow in three steps
- Adjust the offset, blur, spread, and color of the default layer, the preview updates live.
- Add more layers to build depth, subtle shadows read as soft, closer layers add sharpness.
- Copy the generated box-shadow CSS and paste it onto any element.
Why people use the CSS Box Shadow Generator
Everything worth knowing before you dive in.
How it helps
A convincing shadow is rarely a single flat blur, real depth usually comes from stacking two or three shadow layers with different offsets and opacity. Hand tuning that combination by editing raw CSS values is slow, so this tool exposes every parameter as a slider or color field with a live preview box that updates instantly.
Built for real use
Each layer supports horizontal and vertical offset, blur radius, spread, color, and an inset toggle for shadows that sit inside an element rather than around it. Stacking a tight, dark layer with a soft, light one is a common technique for a shadow that reads as natural rather than a flat drop shadow.
Private by default
The output is plain CSS ready to paste onto any element's box-shadow property, with each layer separated by a comma exactly as the CSS specification expects.
Pro tip
Keep the blur value roughly two to three times the offset for a natural looking shadow, and use a low opacity color rather than pure black for a softer, more realistic result.
Common questions
How many shadow layers can I add?
There's no fixed limit, though two or three layers usually gives the most natural looking depth.
What does the inset option do?
It flips the shadow to render inside the element's border instead of outside, useful for pressed button or input effects.
Can I use this for text shadows too?
This tool generates box-shadow specifically, since text-shadow uses a slightly different syntax without spread.