How do I use the CSS box-shadow generator?
- Adjust offset, blur, spread and opacity.
- Pick a shadow colour and turn layering on or off.
- Copy the CSS.
CSS box-shadow generator: frequently asked questions
Why layer shadows?
Real shadows are soft near the edge and fade out further away. Stacking two or three shadows imitates that.
What does a negative spread do?
It shrinks the shadow, keeping it under the element for a lifted look.
Should shadows be black?
A dark tint of your brand or background colour usually looks more natural than pure black.
Do shadows affect performance?
Large blurred shadows on many elements can slow scrolling on low-end phones. Use them in moderation.
Does it work with Tailwind?
Yes — use an arbitrary value, e.g. shadow-[0_12px_32px_-8px_rgba(10,38,32,0.18)].
Is anything uploaded?
No. It runs in your browser.
Can I use the output in Figma or CSS?
Yes. Values are standard HEX, RGB, HSL and CSS that work in Figma, CSS and most design tools.
Is the css box-shadow generator free?
Yes. It is free with no sign-up and no usage limits for normal use.
Is my data sent to your servers?
No. This tool runs entirely in your browser, so what you type never leaves your device.
Does it work on my phone?
Yes. The tool works in any modern browser on iPhone, Android, tablet or computer.