CSS Box-Shadow Generator

Design a CSS box-shadow visually and copy the code in one click. Drag the sliders for offset, blur, spread, and opacity, pick a colour, and see the result update live. Toggle inset for inner shadows.

How CSS box-shadow works

The box-shadow property takes a horizontal offset, a vertical offset, a blur radius, a spread radius, and a colour. Positive offsets push the shadow right and down. A larger blur makes it softer, and spread grows or shrinks the shadow before the blur is applied.

Tips for natural shadows

• Keep the shadow colour low in opacity (10 to 25 percent) for a soft, realistic look.
• A small vertical offset with a generous blur reads as a gentle lift off the page.
• Use a slightly negative spread to keep the shadow tight under the element.

Frequently asked questions

What is the difference between blur and spread?

Blur softens the edge of the shadow. Spread changes the size of the shadow itself, growing it with a positive value or shrinking it with a negative one.

What does inset do?

Inset draws the shadow inside the element instead of outside, which is useful for pressed buttons, inputs, and inner glows.

Can I add more than one shadow?

Yes. In CSS you can list several shadows separated by commas. This generator builds one shadow at a time, which you can stack together in your own stylesheet.