How to Use CSS Box Shadow Generator
Dial in the perfect CSS box-shadow with sliders for horizontal/vertical offset, blur, spread and opacity, plus a color picker and inset toggle. A live preview updates as you go and the CSS is one click away.
Open the CSS Box Shadow Generator tool →What is CSS Box Shadow Generator?
Visually craft CSS box-shadows with offset, blur, spread, color and inset controls. It's completely free, needs no sign-up, and runs entirely in your browser — so it's fast and private.
How to use CSS Box Shadow Generator
- Open the CSS Box Shadow Generator tool.
- Paste or type your input.
- Set any options provided.
- Copy the result. Everything runs in your browser — nothing is uploaded.
Frequently asked questions
What can I control?
Horizontal and vertical offset, blur, spread, colour, opacity and the inset toggle, all with a live preview.
Can I stack multiple shadows?
CSS supports comma-separated shadows. Craft each one here and combine them in your stylesheet.
How do I make a soft, subtle shadow?
Use a small offset, a larger blur, a small or negative spread and a low-opacity colour.
Ready to try it?
Open CSS Box Shadow Generator →