CSS Box Shadow Generator
Drag sliders to build a CSS box-shadow with a live preview.
box-shadow: 0px 8px 24px -4px rgba(20, 17, 13, 0.18);
The four lengths are offset-x, offset-y, blur, and spread; opacity is folded into the color as an rgba alpha so the shadow stays soft. Inset draws the shadow inside the box instead of behind it. Drag the sliders and watch the preview update, then copy the ready-to-paste declaration.
How to make a box shadow
Drag the sliders for offset, blur, spread, and opacity, and pick a color. The preview box updates as you go, and the box-shadow declaration below is ready to copy into your CSS.
Softer, realistic shadows
Keep the opacity low, the vertical offset small, and the blur generous for a natural shadow. A slight negative spread tucks the shadow under the element so it doesn't bleed past the edges.
Questions
What do the four lengths mean?
In order: horizontal offset, vertical offset, blur radius, and spread radius. Positive offsets push the shadow right and down; blur softens its edge; spread grows or shrinks the shadow before blurring.
What does inset do?
Inset draws the shadow inside the element instead of behind it, which reads as a recessed or pressed-in look. The same offsets and blur apply, just pointing inward.