Box-Shadow Generator — free online tool
Getting a box shadow to look right by typing numbers is slow. You change a value, reload, squint, change it again. Most of us just want to see the shadow move while we tweak it. We added a free tool that does exactly that — Box-Shadow Generator — right in your browser.
What it does
You design the shadow by eye. Drag sliders for the horizontal and vertical offset, the blur, the spread and the color, and flip it to an inset shadow when you need one. You can stack several shadow layers on top of each other, and the matching CSS is written for you as you go. When it looks right, copy the ready code.
Nothing leaves your device
The whole thing runs inside your browser. Nothing is uploaded, nothing is saved on a server, and there's no account. Close the tab and it's gone.
How to use it
- Open the Box-Shadow Generator and drag the sliders for offset, blur, spread and color.
- Add more layers or turn on inset until the shadow looks the way you want.
- Copy the CSS and paste it into your stylesheet.
It's free with no limit. There are more small tools on the Apps page.