Shadow Designer

Layer multiple box-shadows to create realistic depth. Export as CSS or Tailwind.

Background

Element

Shape

CSS Output

box-shadow:
    0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 4px 6px -2px rgba(0, 0, 0, 0.05);

Presets

Layers (2)

Layer 1

X0px

Y10px

Blur15px

Spread-3px

Alpha0.10

Color

Layer 2

X0px

Y4px

Blur6px

Spread-2px

Alpha0.05

Color

Part of the keyboardcrumbs design toolkit. Pair with /palette for a complete system.