Free CSS Box Shadow Generator Online
Use this free CSS box-shadow generator to design shadows with a live preview. Fast, private, and works in your browser.
Loading tool…
What is CSS Box Shadow Generator?
CSS Box Shadow Generator lets you tune offset, blur, spread, color, and inset to craft a box-shadow, with a live preview and copyable CSS. It is useful for cards, buttons, and modals. It runs in your browser.
How to use this tool
- Adjust the shadow sliders and color.
- Toggle inset if needed.
- Preview the shadow.
- Copy the generated CSS.
Features
- Adjust offset, blur, spread, and color
- Inset shadow option
- Live preview
- Copy the CSS
- Runs entirely in your browser
This tool runs in your browser. Your files and text are not uploaded to our servers, and we do not store your input.
Frequently asked questions
What is the spread value?+
Spread grows or shrinks the shadow before blur is applied.
Can I make an inner shadow?+
Yes. Enable the inset option for an inner shadow.
Is anything uploaded?+
No. The CSS is generated entirely in your browser.
Related tools
Looking for more Developer Tools?
Browse the full collection of free, browser-based tools.