CSS Box Shadow Generator

Dial in offset, blur, spread, colour and opacity, watch the preview, then copy the box-shadow rule.

X offset (px)

Y offset (px)

Blur (px)

Spread (px)

Shadow colour

Opacity (0–1)

Options

Inset shadow

Preview

Box

CSS

How it works

Offset, blur, spread and opacity are all adjustable, and the colour picks up your chosen value as rgba().
Inset shadows are supported for pressed and well styles.
The preview box sits on the same background as a card, so the shadow reads the way it will in your page.