Box Shadow
Stack multiple shadow layers and copy the CSS.
About Box Shadow
Box Shadow builds up shadows from multiple stacked layers, which is the trick behind shadows that look real. A single large blur reads as a smudge; two or three layers — one tight and dark, one wide and faint — mimic how light actually falls. Presets cover the usual elevation levels.
How to use it
- Start from a preset, or build from scratch.
- Adjust offset, blur, spread and opacity per layer. Add layers for more depth.
- Copy the CSS.
Questions
Why stack multiple shadows?
Real shadows have a sharp core near the object and a soft falloff further out. One layer can only do one of those. Two or three layers is what makes a card look lifted rather than blurred.
What opacity should shadows use?
Lower than instinct suggests — 5–15% black. Anything heavier looks like a 2010 web design. Depth comes from layering, not darkness.
What does inset do?
Draws the shadow inside the element instead of outside, making it look pressed in rather than raised. Useful for input fields and active button states.
Box Shadow is free and runs entirely in your browser. No account, no upload, no watermark, no limit on use.