Box Shadow Generator

How to use it

1. Drag the Offset X / Offset Y sliders to move the shadow away from the box.
2. Set Blur for softness and Spread to grow or shrink the shadow before blurring.
3. Pick a color — the picker supports alpha, so semi-transparent shadows are one click away.
4. Toggle Inset to flip the shadow to the inside of the box.
5. Copy the generated box-shadow: line from the CSS panel and paste it into your stylesheet.

Common use cases

• Card elevation — find the soft, wide shadow that reads as depth without looking heavy.
• Focus rings and pressed states — tighten the spread and switch to inset for a pressed-in feel.
• Design tokens — produce the exact values to record as --shadow-sm style variables.
• Teaching CSS — move one slider at a time and watch which parameter changes what.

Why it stays private

Everything runs in local JavaScript: the preview is a plain element with a live style, and no design you try is reported anywhere. The tool needs no network and works offline.

FAQ

Q: Why does my shadow look different on my site? A: The preview square uses the page background; your element may sit on a different color, and shadow perception depends on contrast. Paste the declaration into your real layout to judge it in context.

Q: Can I stack two shadows? A: This generator outputs a single shadow, which covers most needs. To stack, generate each layer here and comma-separate them in your CSS — the first shadow in the list renders on top.

Q: Does inset work with blur and spread? A: Yes. The inset keyword simply goes first in the declaration; offset, blur, spread and color behave the same way, just measured from the inner edge of the box.