CSS Box Shadow Generator
Dial in a box-shadow the visual way: drag offset, blur and spread, set the colour and opacity, toggle inset, and copy the `box-shadow` rule. The sample element updates as you go, all in your browser.
- 100% free
- Private & safe
- Runs in your browser
Why use CSS Box Shadow Generator?
CSS Box Shadow Generator is a quick, no-nonsense developer utility that runs entirely client-side, so your code and data never leave your machine.
- Runs instantly in your browser — nothing to install, nothing uploaded.
- Completely free, with no account, no watermarks and no usage limits.
- Output: CSS box-shadow property
- Set the X and Y offset, blur and spread.
- Works on any device — desktop, tablet and phone — and is fully keyboard accessible.
How to use CSS Box Shadow Generator
- Set the X and Y offset, blur and spread.
- Choose a colour and opacity, and toggle inset if needed.
- See the shadow on the sample element instantly.
- Copy the box-shadow CSS.
Examples
- A soft card elevation shadow.
- An inset shadow for a pressed button.
Supported formats & limits
- Output: CSS box-shadow property
Limitations
- One shadow layer (stack more by hand for layered shadows).
Frequently asked questions
Can I make layered shadows?
This builds one layer; paste several comma-separated values in your CSS for a layered effect.
What does inset do?
Inset draws the shadow inside the element instead of outside, useful for pressed or recessed looks.
Is my data uploaded?
No — everything is computed locally.
Was this tool helpful?
Related tools
CSS Gradient GeneratorDesign linear and radial CSS gradients with a live preview and copy the code.CSS Border Radius GeneratorSet each corner radius independently and copy the CSS, with a live preview.CSS Glassmorphism GeneratorCreate a frosted-glass (glassmorphism) effect with blur, tint and transparency.CSS FormatterBeautify and indent minified or messy CSS.