Box Shadow Generator
Visual CSS box-shadow builder.
Box Shadow Generator at a glance
Box Shadow Generator is a free online developer tool you can use right now to visual CSS box-shadow builder โ no account, no install and no usage limit. It runs entirely inside your browser, so whatever you enter stays on your own device.
- Price
- Free โ no trial, no paid tier, no watermark
- Sign-up
- Not required
- Where it runs
- In your browser โ nothing is uploaded to a server
- Works on
- Chrome, Safari, Firefox and Edge โ desktop, tablet and phone
- Category
- Developer Tools
About Box Shadow Generator
Adjust offset, blur, spread and colour with live preview, then copy the resulting box-shadow declaration. Faster than guessing at four numbers and reloading a page to check.
The four values do distinct things and spread is the one most often misunderstood. Horizontal and vertical offsets move the shadow. Blur softens its edge. Spread grows or shrinks the shadow before blurring is applied โ a negative spread pulls it in, which is how you get a tight shadow that does not leak out from the sides of an element.
Realistic shadows follow how light actually behaves. Light usually comes from above, so a small positive vertical offset with no horizontal offset looks natural, while a shadow offset sideways reads as artificial unless the whole design implies a light source there. Larger blur with lower opacity suggests an object further from its surface; a tight, darker shadow suggests it is close to it.
The single biggest improvement to most shadows is layering two or three instead of using one. A real shadow is darker and tighter near the object and lighter and more diffuse further out, which one shadow cannot express. Two comma-separated shadows โ one small and slightly darker, one large and very faint โ look dramatically better than a single heavy one, and this is what most design systems do.
How to use Box Shadow Generator
- Set the horizontal and vertical offsets to place the shadow.
- Adjust blur and spread until the softness looks right, then set colour and opacity.
- Toggle inset for an inner shadow, and copy the generated CSS.
Frequently asked questions
What does spread actually do?
It grows or shrinks the shadow before the blur is applied. A positive spread makes it larger than the element, a negative spread smaller. Negative spread is useful for a tight shadow that does not leak out at the sides.
How do I make a shadow look realistic?
Layer two or three rather than using one. A real shadow is darker and tighter near the object and fainter further out. One small, slightly darker shadow plus one large, very faint one looks far better than a single heavy shadow.
What is an inset shadow for?
It draws the shadow inside the element instead of outside, making it appear recessed. It is the usual way to make an input field or a pressed button look inset into the surface.
Do box-shadows hurt performance?
A static shadow is cheap. Animating blur or spread is expensive, because the browser must repaint every frame. If you need a shadow to animate, transition opacity on a second layered shadow instead โ that composites on the GPU.