CSS Box-Shadow Generator
Design a CSS box-shadow visually and copy the code in one click.
How to use
- Drag the sliders for offset, blur and spread.
- Pick a shadow color and opacity.
- Copy the generated box-shadow CSS.
How the CSS Box-Shadow Generator works
Builds CSS box-shadow values with live preview, covering offset, blur, spread, colour and inset.
A box-shadow takes horizontal and vertical offsets, an optional blur radius, an optional spread, and a colour. Multiple shadows can be comma-separated, which is how realistic layered depth is achieved.
box-shadow: offset-x offset-y blur spread color [inset]
Worked example
box-shadow: 0 4px 6px rgba(0,0,0,0.1) is the standard subtle card lift — no horizontal offset, small downward offset, soft blur, low opacity black.
Things worth knowing
- Light is assumed to come from above, so a positive vertical offset with no horizontal offset looks natural.
- Layering two or three shadows with different blurs reads as far more realistic than one large shadow.
- Low-opacity black over the background beats a solid grey shadow, which looks flat and dirty.
- Large blur radii are expensive to paint. Watch them on scroll-heavy pages.
Frequently asked questions
What does spread do?
Spread grows or shrinks the shadow before the blur is applied — negative values tuck it under the element.
Can I add multiple shadows?
This builds one shadow; you can stack several by separating them with commas in your CSS.
How do I put a shadow inside the element?
Add the inset keyword. Inset shadows read as depressions rather than elevation.