Try the CSS Box Shadow Generator
Create smooth CSS box shadows with sliders for offset, blur, spread, colour and opacity. Live preview, inset option, layered shadows and copy-ready code.
- Free to use
- No signup
- Nothing to install
- Runs in your browser
Illustration. Open the tool for the real thing.
What is the CSS Box Shadow Generator?
The CSS box-shadow property adds depth to cards, buttons, modals and images. It takes horizontal and vertical offsets, a blur radius, a spread radius, a colour and an optional inset keyword. Getting the values right by trial and error is slow; this generator lets you drag sliders and see the result immediately.
Adjust every value, choose the shadow colour and opacity, switch to an inset shadow, and use presets such as soft, hard, layered and neumorphic. Then copy the finished CSS — including the -webkit- prefix line if you want it — and paste it into your stylesheet.
3 steps to your result
Open the tool and follow along. Nothing to install.
What you get
See the shadow on a card as you move the sliders.
Offsets, blur, spread, colour, opacity and inset.
Soft, hard, layered and neumorphic looks.
One click copies the declaration.
AZRS tools are free to open and use.
It opens in your browser, so there is nothing to download.
Used for
Pick one to see how it fits.
How it compares
A plain look at this tool next to the usual alternative.
| This utility | Desktop software | |
|---|---|---|
| Install | Nothing to install | Usually an app or program to install |
| Account | No signup | Depends on the product |
| Cost | Free to use | Free or paid, depends on the product |
| Where it runs | In your browser tab | On your computer |
Questions people ask
What do the box-shadow values mean?
Horizontal offset, vertical offset, blur radius, spread radius, colour and optional inset.
What is an inset shadow?
A shadow drawn inside the element instead of outside.
Can I add multiple shadows?
Yes, separate them with commas; the tool generates layered presets.
Does box-shadow affect layout?
No, it does not take up space.
Is it supported everywhere?
Yes, in all modern browsers.
More free tools
Related to the CSS Box Shadow Generator.
Try the CSS Box Shadow Generator now
Design box shadows visually and copy the CSS. Free to use.
Try it free