CSS Box Shadow Generator
Design ToolsVisual box-shadow builder with CSS output
Embed this tool on your websiteFree
- Choose how tall the frame should be.
- Press Copy code.
- Paste it into your page, blog, WordPress or Notion HTML block.
The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.
Similar tools you may like
History
All history →CSS Box Shadow Generator — at a glance
Design the perfect shadow for cards and buttons, then copy the CSS in one click.
How to use it — step by step
Nothing to paste — adjust the values and generate.
Choose options
Pick the mode and options that fit what you need.
Generate Shadow
Press the button. The result is created instantly on your device.
Copy the result
Check the output and press Copy to use it anywhere.
Pro tips
Small things that make the result better.
Quick facts
Frequently Asked Questions
What does spread do?+
It grows or shrinks the shadow size before blur is applied.
How do I make a subtle shadow?+
Use blur 20–40px, no spread, and opacity around 0.1–0.2.
Can I stack several shadows?+
In CSS yes — separate them with commas. Generate each and combine them.
Is my data safe?+
Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.