CSS Box Shadow Generator — free online
Getting a shadow to look right in CSS can take a lot of guessing. You tweak a number, refresh, tweak again, and still it looks flat or too heavy. We added a free tool that lets you see the shadow as you build it — CSS Box Shadow Generator — right in your browser.
What it does
You design a CSS box-shadow visually. Drag sliders for the horizontal and vertical offset, the blur, the spread, the colour and the opacity, and the preview updates as you move. When it looks the way you want, you grab the ready CSS 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 to make. What you build stays on your screen.
How to use it
- Open CSS Box Shadow Generator.
- Drag the sliders for offset, blur, spread, colour and opacity until the preview looks right.
- Copy the CSS code and paste it into your stylesheet.
It's free with no limit. There are more small tools on the Apps page.