Free · no signup · browser-local

CSS Box Shadow Generator With Inset Preview

Preview an inner or outer shadow as you adjust its offset, blur, spread, color and opacity. Copy the resulting box-shadow declaration into your CSS.

Configure

LOCAL

Horizontal (px)

Vertical (px)

Blur (px)

Spread (px)

Corner radius (px)

Opacity (0–1)

Shadow color

Preview background

Inset shadow

Your shadow preview

box-shadow: 8px 12px 24px 0px rgba(0, 0, 0, 0.2);

Adjust offset, blur, spread, color, opacity and inset; preview the result and copy the declaration.

This creates one shadow layer. Check the result against your actual background and accessibility needs.

Try 8 px horizontal, 12 px vertical and 24 px blur for a soft card shadow.

The controls map directly to CSS box-shadow, with color converted to rgba for opacity.

Tune a box shadow with live preview and copy the exact CSS.

How do I use CSS Box Shadow Generator?

Adjust offset, blur, spread, color, opacity and inset; preview the result and copy the declaration.

Does this tool upload my data?

Inputs and files are processed in your browser. Page-view analytics do not contain your tool input.

What should I check before using the result?

This creates one shadow layer. Check the result against your actual background and accessibility needs.