CSS Box Shadow Generator

Offset moves the shadow horizontally and vertically, implying where the light is. Blur softens the edge — zero gives a hard-edged shape, higher values a diffuse glow. Spread grows or shrinks the shadow before blurring, so a negative spread pulls it in tight for a subtle lift.

Keep it soft and subtle, offset mainly downward since light usually comes from above, and use a low-opacity black rather than grey — grey shadows look flat over coloured backgrounds. Layering two shadows, one tight and one wide and faint, mimics real light far better than a single heavy one.

Rarely at normal scale. Very large blur radii on many elements can cost during scrolling and animation, since the browser repaints them. If you are animating a shadow, animating opacity on a pseudo-element is usually smoother than animating box-shadow directly.

Yes, CSS Box Shadow Generator is completely free. No signup, no account, and no watermark on outputs. A Pro tier is available for 100 AI ops/day and larger file sizes.

CSS Box Shadow Generator runs entirely in your browser. Your file is never uploaded — it is read, processed and saved locally, so it never reaches our servers or anyone else's. You can disconnect from the internet after the page loads and it still works.