About the Box Shadow Generator tool
Box Shadow Generator lets you design CSS shadows visually with sliders for offset, blur, spread, color, and opacity. A live box shows exactly how the shadow looks, and the CSS updates as you tweak. It saves web developers from guessing shadow values and produces clean, copy-ready code for cards, buttons, and modals.
How to use the Box Shadow Generator
- Adjust the horizontal and vertical offset sliders.
- Set the blur and spread to taste.
- Pick a shadow color and opacity.
- Copy the generated box-shadow CSS.
Features
- Live preview of the shadow.
- Full control: offset, blur, spread, color, opacity.
- Clean, copy-ready CSS output.
- Private and browser-based.
- Free with no sign-up.
Your privacy
The Box Shadow Generator runs entirely inside your web browser. Your files and text are never uploaded to any server, so your data stays private on your own device — just like the workflow trusted on sites such as iLovePDF and Sejda, but with nothing leaving your computer.
Frequently asked questions
Can I make an inset shadow?
This tool creates outer shadows; add the inset keyword manually to the copied code if needed.
What is spread?
Spread expands or shrinks the shadow size before the blur is applied.
Is anything uploaded?
No, the Box Shadow Generator runs entirely in your browser.