Real light does not cast one blur. Close to the object the shadow is tight and dark, far away it is wide and faint. Stack layers that double in distance and blur, and a flat rectangle starts to float. Drag the slider to lift both cards.
1 layer
6 layers
Lift34px
Round game
Which card is really floating?
Same card, same light, same height. Only the shadow recipe differs. Pick the one that looks more like paper lifted off a desk. Six rounds, random heights and light angles.
Round 1 / 6Stacked picks: 0
Tap the card that looks lifted higher off the surface.
Lamp lab
Move the lamp. Watch the shadows follow.
Three cards at 8, 24 and 56 px of lift. Drag the lamp (or focus it and use the arrow keys). The CSS of the middle card is generated live.
8 px
24 px
56 px
drag the lamp
The recipe
Four rules for shadows that look physical
Double it each layer. Offset and blur grow 1, 2, 4, 8, 16, 32. Each layer is a different distance from the surface.
Spend opacity wisely. Many faint layers add up to a soft, believable edge. One heavy layer looks like a drop of ink.
Tint, do not blacken. Mix the shadow from the surface hue. Pure black on a warm paper looks dirty.
One light for the whole page. Every shadow offset must point the same way, and higher cards throw longer ones.