Tools
CSS Box-Shadow Generator
Stack multiple shadow layers for realistic, soft depth. Tune offset, blur, spread and color, flip to inset, and copy the CSS. Everything runs in your browser.
About box-shadow
The box-shadow property paints one or more shadows around an element's frame. Each layer is
x y blur spread color: positive y drops the shadow downward, blur
softens the edge, and spread grows or shrinks the shadow before blurring.
The secret to shadows that look real is stacking several low-opacity layers instead of
one harsh one: a tight, dark layer for contact plus a wide, faint layer for ambient light. Add
inset to carve the shadow inward for pressed buttons and inner wells.
Building a card? Give it a gradient from the gradient generator, then layer these shadows on top.