CSS Box Shadow Generator
Design box shadows.
About this tool
Tune X/Y/blur/spread/color (and optional inset) then export CSS plus a Tailwind arbitrary shadow class.
How to use
Adjust the numbers, watch the preview card, copy box-shadow or shadow-[…] for utilities.
Example
Default elevation matches a floating card under dark UI chrome.
Input
0 8px 24px 0 rgba(0,0,0,0.2)Output
box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.2);Tip
Soft UI shadows are often off Tailwind’s default scale — arbitrary values keep the exact look.
Good to know
Can I stack several shadows?
The generator produces one shadow layer at a time. Combine layers by joining the values with commas in your CSS.
How is the Tailwind class built?
Spaces become underscores inside shadow-[…], which is how Tailwind reads arbitrary values. Spaces inside rgba() colors are removed, as the tool already does.