Advertisement
Guide
About the Box Shadow Generator
The CSS box-shadow property adds depth to elements — cards, buttons, modals, and dropdowns all rely on it. But its syntax packs several values into one line, and realistic shadows usually need several stacked layers, which is tedious to write by hand. This generator lets you build shadows visually: adjust offset, blur, spread, color, and opacity with sliders, add as many layers as you like, and copy the CSS.
A live preview updates as you tweak, so you can dial in exactly the elevation you want. Everything runs in your browser.
What each value controls
- Offset X / Y — how far the shadow shifts horizontally and vertically.
- Blur — how soft the shadow's edge is; higher is softer.
- Spread — grows or shrinks the shadow before blurring.
- Color & opacity — the shadow tint, usually a semi-transparent dark color.
- Inset — draws the shadow inside the element for a pressed or recessed look.
Why realistic shadows use multiple layers
Real objects cast layered shadows — a tight, darker one close to the object and a softer, wider one further out. A single box-shadow looks flat, but stacking two or three layers with different blur and opacity produces a natural sense of elevation. This tool makes layering easy, which is the secret behind polished, modern card and button styles.
How to use it
- 1Adjust offset, blur, spread, color, and opacity for a layer.
- 2Add more layers to build a realistic, elevated shadow.
- 3Toggle inset for a recessed effect if you need it.
- 4Copy the generated box-shadow CSS into your stylesheet.
Frequently asked questions
What does spread do in box-shadow?
Spread grows (positive) or shrinks (negative) the shadow before it is blurred. A positive spread makes the shadow larger than the element; a negative spread pulls it in.
What is an inset shadow?
Adding the inset keyword draws the shadow inside the element instead of outside, creating a pressed, recessed, or inner-glow effect.
Why do designers stack multiple shadows?
Layering a tight dark shadow with a softer wide one mimics how real objects cast light, producing more natural depth than a single shadow can.
How do I make a soft, subtle shadow?
Use a small offset, a larger blur, and a low-opacity color. High blur with low opacity reads as a gentle, diffuse shadow.
Is the CSS generated locally?
Yes. The preview and CSS are produced entirely in your browser.