CSS Box Shadow Generator
Design a CSS box-shadow visually with a live preview and get the copy-paste CSS instantly. Free and private, right in your browser.
Drag sliders for offset, blur, spread, and color to build a box-shadow visually, then copy the finished CSS straight into your stylesheet. Handy for dialing in card elevation, button depth, or a neumorphic effect without doing the pixel math by hand.
How to use it
- Adjust the X/Y offset, blur, spread, and color sliders on the preview box
- Layer in an inset or a second shadow if you want more depth
- Copy the generated box-shadow CSS and paste it into your stylesheet
Frequently asked questions
- What's the difference between blur and spread?
- Blur softens the shadow's edge outward in both directions (higher = fuzzier, more spread-out fade). Spread grows or shrinks the shadow's whole shape before blurring is applied. Positive values make it bigger than the box, negative values shrink it, which is useful for tight, tucked-in shadows.
- Can I stack multiple shadows on one element?
- Yes. Box-shadow accepts a comma-separated list, and the tool lets you add extra shadow layers so you can combine a soft ambient shadow with a tighter, darker one for more realistic depth, the way most design systems do.
- How do I get an inset (inner) shadow?
- Toggle the inset option and the tool prepends the inset keyword to the CSS output, which draws the shadow inside the element's border instead of behind it, useful for pressed buttons or input field states.
- 1
Nothing is uploaded
The file never leaves your device. There is no server to send it to, so there is nothing to leak, log, or subpoena.
- 2
No signup, no limits
No account, no email, no daily cap, no watermark, and no paid tier waiting behind the third file.
- 3
Works offline
Load the page once and it keeps working with the network off, because all the work was always happening locally.