offlinewebtools.com browser-local workbench

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.

Shipped

Browser local

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);

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.

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.