Box Shadow Generator
Design CSS box shadows with offset, blur, spread, colour and opacity, including smooth layered shadows and inset shadows.
Free · No upload · 100% on your device
How to use Box Shadow Generator
- Choose the settings in the side panel.
- The result updates instantly. Select “Update” for a fresh one.
- Copy the result or download it.
Private by design. Everything you type, open or record is processed in this browser tab and is never uploaded to KittySuite.
About Box Shadow Generator
Layered shadows stack several shadows that grow in size and fade, which looks softer and more natural than one large blur. Keep opacity low on light backgrounds; dark interfaces need stronger shadows to be seen.
Everything is calculated in this browser tab and nothing you enter is sent anywhere. It keeps working offline once the page has loaded.
Box Shadow Generator: frequently asked questions
How do I create a CSS box shadow?
Adjust the offset, blur, spread, colour and opacity while watching the preview, then copy the CSS.
How do I get a soft, natural shadow?
Use several layers. Layered shadows grow in size and fade, which looks softer than one large blur.
Can I make an inner shadow?
Yes. Turn on Inset to draw the shadow inside the box, for pressed buttons and input wells.
Why is my shadow invisible on a dark background?
Dark interfaces need stronger shadows. Raise the opacity, or keep it low on light backgrounds.