CSS Box Shadow Generator
Runs in your browser — your data is never uploaded.
Build a box-shadow rule with offset, blur, spread and colour, and get the CSS to paste. The colour is emitted as rgba so the opacity slider actually works without you editing a hex code. The notes explain what separates a shadow that looks real from one that looks like 1990s clip art — which is almost always low opacity, generous blur and very little horizontal offset.
How to use Box Shadow Generator
- 1
Set the horizontal and vertical offset, blur and spread.
- 2
Pick a colour and an opacity — low opacity black is usually right.
- 3
Click “Generate” and copy the CSS.
Share
Embed this tool on your site
Paste this where you want the tool to appear. It runs entirely in your visitor's browser — no uploads, no account, no tracking.
Please keep the attribution line — it's what keeps these tools free.
Need a different size, a dark theme, or a different tool? Build an embed lets you preview it first.
Frequently asked questions
Why does my shadow look fake?+
Usually too much opacity and too little blur. Real shadows are soft and subtle: try 10–20% opacity with a blur several times the vertical offset, and keep the horizontal offset near zero since light generally comes from above.
What is spread?+
It grows or shrinks the shadow before blurring. A negative spread pulls it in so it peeks out only at the bottom, which is a common trick for a tight, grounded card shadow.
Can I use more than one shadow?+
Yes — box-shadow takes a comma-separated list, and layering two or three at different blurs looks far more natural than one large one. Generate them individually and join them with commas.
What does inset do?+
It draws the shadow inside the element rather than outside, which is how you get a pressed or recessed look — useful for active button states and inset form fields.