Something wrong with this tool?
About CSS Box Shadow Generator Online
This tool builds CSS box-shadow values visually with sliders for offset, blur, spread, color, and opacity. You see the shadow update in real time and copy the matching CSS once you're happy with it.
Box shadows add depth, separate elements from the background, and signal interactivity (hover states, pressed states, focused elements). Multi-layer shadows can simulate complex lighting setups like Material Design elevation or neumorphic effects.
Use it for cards, modals, popovers, buttons, and any UI element that needs visual lift. The generator can output classic box-shadow, multiple shadow layers, and modern offset/blur combinations.
How to use this tool
How to assemble a CSS box-shadow declaration
Offsets
"X offset (px)" and "Y offset (px)" move the shadow horizontally (positive = right) and vertically (positive = down). The CSS default is no offset; common card shadows use small Y like `4` and X near 0.
Blur and color
"Blur (px)" controls softness — 0 is hard-edged, 10+ is hazy. "Color" accepts any CSS color, including rgba/hex with alpha. For subtle UI shadows, use `rgba(0,0,0,0.15)` and a moderate blur.
Press Run
Result is a single `css` field — `<x>px <y>px <blur>px <color>`. Paste as the value of `box-shadow:`. No spread parameter or inset are emitted; the syntax allows them but this tool keeps to the 4-arg form.
Multiple stacked shadows
Real designs often stack 2-3 shadows separated by commas (a soft long one + a tight short one) for depth. Use this tool to generate each, then concat manually with commas inside one `box-shadow:` value.