All tools

CSS Box Shadow Generator

Visually build a CSS box-shadow.

Layer 1
CSS
box-shadow: 0px 8px 24px -4px #0f172a40;

About

Drag sliders for offset, blur, spread, color, and inset. The shadow updates on a live preview, and the CSS appears below ready to copy. Add multiple shadow layers for more depth.

How to use

  1. Drag sliders to set offset, blur, spread, and color.
  2. Add layers if needed.
  3. Copy the CSS.

FAQ

What's the difference between blur and spread?+

Blur softens the edge of the shadow. Spread grows or shrinks the whole shadow before blurring. Negative spread makes the shadow smaller than the box, which is useful for inset glows.