Question 1

How does the CSS box-shadow property work?

Accepted Answer

The box-shadow property takes, in order, a horizontal offset, a vertical offset, an optional blur radius, an optional spread radius and a colour — for example box-shadow: 4px 4px 12px 0 rgba(0,0,0,0.2). Positive offsets push the shadow right and down; blur softens its edge; spread grows or shrinks it; and the colour, usually a semi-transparent rgba, sets how dark it is. Adding the keyword inset draws the shadow inside the element instead of outside, which is useful for pressed or inset effects. This tool builds that value for you from sliders.

Question 2

What is the difference between blur and spread?

Accepted Answer

Blur radius controls how soft or sharp the shadow's edge is: 0 gives a hard edge, and larger values fade it out gradually. Spread radius changes the size of the shadow before it is blurred: a positive spread makes the shadow larger than the element, and a negative spread makes it smaller, which is handy for a tight shadow that only peeks out on one side. Together they let you go from a crisp offset block to a soft, diffuse glow.

Question 3

How do I make a soft, subtle shadow?

Accepted Answer

For a soft, modern card shadow, use a small vertical offset, a fairly large blur, little or no spread, and a low-opacity colour — something like 0px 8px 24px rgba(0,0,0,0.12). Keeping the horizontal offset at zero and the colour translucent makes the shadow read as gentle depth rather than a hard drop. You can also stack a second, larger and even fainter shadow for extra realism. Drag the sliders here and watch the preview to dial it in.

Question 4

Does the generated CSS work everywhere?

Accepted Answer

Yes. box-shadow is supported in every modern browser — Chrome, Edge, Firefox and Safari, on desktop and mobile — and has been for many years, so the value this tool outputs works without any prefix. Everything runs in your browser and nothing is uploaded.

Box Shadow Generator

Frequently Asked Questions