Home / Design / Box Shadow Generator
Box Shadow Generator
Layer and tweak CSS box shadows with a live preview, then copy the code.
Realistic shadows are layered: real objects cast a tight, darker shadow close to their base and a soft, wide one further out. Stack two or three layers with low opacity (5–15%) instead of one heavy shadow — the “Soft” and “Layered” presets show how. Tint the shadow with a dark version of your background colour rather than pure black for a more natural look.
About the Box Shadow Generator
The CSS Box Shadow Generator lets you layer multiple shadows and adjust each one’s offset, blur, spread, colour, opacity and inset setting, with a live preview and presets. Layered shadows look more natural and add depth to cards, buttons and modals — copy the CSS when it looks right.
How to use the Box Shadow Generator
- Adjust the offset, blur, spread, colour and opacity of the shadow.
- Add more shadow layers or switch to inset for an inner shadow.
- Change the box colour, background and corner radius to match your design.
- Copy the CSS.
Frequently asked questions
What does spread do in box-shadow?
Spread grows or shrinks the shadow before it is blurred. A negative spread makes a shadow tighter than the element, which often looks more natural.
Why use more than one shadow?
Real shadows have a sharp part close to the object and a soft part further away. Layering a small tight shadow with a large soft one looks more realistic.
What is an inset shadow?
An inset shadow is drawn inside the element instead of outside, making it look pressed in.