What is the difference between blur and spread?

Blur softens the shadow edge. Spread expands or contracts the shadow’s solid footprint before blur is applied.

What does an inset shadow do?

Inset draws the shadow inside the element’s border box, which can create a pressed or recessed appearance.

Can CSS use more than one box shadow?

Yes, CSS accepts comma-separated shadows. This generator creates one shadow at a time.

CSS Box-Shadow Generator

LocalFree

Craft the perfect box-shadow with live preview. Tune offset, blur, spread, color, and inset, then copy the CSS — entirely client-side.

Output

Input

Offset X0Offset Y10Blur25Spread-5Opacity25

ColorInset

CSS code

box-shadow: 0px 10px 25px -5px rgba(17, 24, 39, 0.25);

Runs in your browser; files and input stay on this device

About box-shadow

The CSS box-shadow property adds depth to elements with soft, layered shadows — essential for cards, buttons, and modern UI. This generator gives you sliders for horizontal and vertical offset, blur radius, spread, and opacity, plus a color picker and an inset toggle, with an instant preview of the result. Copy the generated rule straight into your stylesheet; nothing is uploaded anywhere.

How to use CSS Box-Shadow Generator

1Adjust horizontal and vertical offset, blur, spread, and opacity.
2Choose the shadow color and enable Inset if needed.
3Use the preview to check the result, then copy the CSS rule.

Frequently asked questions

What is the difference between blur and spread?: Blur softens the shadow edge. Spread expands or contracts the shadow’s solid footprint before blur is applied.
What does an inset shadow do?: Inset draws the shadow inside the element’s border box, which can create a pressed or recessed appearance.
Can CSS use more than one box shadow?: Yes, CSS accepts comma-separated shadows. This generator creates one shadow at a time.