← Pixel

Shadow Forge

Layered box-shadow generator. Because one shadow was never enough.

Presets

Layers

Layer 1
X0px
Y1px
Blur2px
Spread0px
Opacity6%
Color#000000
Layer 2
X0px
Y4px
Blur6px
Spread0px
Opacity10%
Color#000000
Layer 3
X0px
Y10px
Blur15px
Spread-3px
Opacity10%
Color#000000

Background

Shape

Element Color

CSS
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06),
           0px 4px 6px 0px rgba(0, 0, 0, 0.10),
           0px 10px 15px -3px rgba(0, 0, 0, 0.10);
Layer breakdown
1
0px 1px 2px 0px rgba(0, 0, 0, 0.06)
2
0px 4px 6px 0px rgba(0, 0, 0, 0.10)
3
0px 10px 15px -3px rgba(0, 0, 0, 0.10)

A good shadow is invisible. It suggests depth without announcing it. If the user notices your shadow, the shadow has failed.