Box Shadow Generator
Tune CSS box shadows with sliders and copy the result for cards, buttons, and modals.
Free, no signup needed. Runs 100% in your browser.
Loading…
How to use this tool
- Adjust offset, blur, spread, and color.
- Preview on light and dark cards.
- Copy the CSS.
Frequently asked questions
What makes a good card shadow?
Layered soft shadows with low opacity. Two subtle layers usually beat one harsh shadow.
Does it support inset shadows?
Yes. Toggle inset for pressed or inner effects.
Do shadows look the same on every screen?
Not always. Blur and transparency render slightly differently across browsers and displays, so check on a real device.
Related tools
Need a website for this?
Describe your idea once and BYOB plans, builds, and deploys your site.
Embed this tool
Paste this snippet to show this tool on your own site.