offlinewebtools.com — free, watermark-free browser tools that stay on your device with nothing uploading to our servers

Drop Shadow Generator

Compose multi-layer CSS shadows with ease. Customize offsets, blur, spread, color, and inset options, then copy the final `box-shadow` definition.

What this tool does

Drop Shadow Generator helps you compose multi-layer CSS shadows with ease. Customize offsets, blur, spread, color, and inset options, then copy the final `box-shadow` definition.

What you get

Drop Shadow Generator produces a direct output in this page and keeps all processing on your device, with nothing uploaded to our servers.

Free to use, no watermarks, runs in your browser—nothing uploads to our servers

Shadow layers

Layer 1

Color

X offset

Y offset

Blur

Spread

Inset shadow

Layer 2

Color

X offset

Y offset

Blur

Spread

Inset shadow

Preview

CSS output

box-shadow: 0px 20px 35px -12px rgba(15, 23, 42, 0.25), 0px 10px 15px -10px rgba(15, 23, 42, 0.15);

Report a bug

If this tool misbehaves, share a quick summary so we can investigate. We include the tool URL automatically—no need to copy and paste.