CSS Box Shadow Generator

Best Practices for Realistic UI Drop Shadows

Convincing shadows imitate a single consistent light source, almost always placed above the interface. That means a positive Y offset, a zero or near-zero X offset, and a blur radius roughly two to three times the offset. Spread should stay small — large positive spread produces the flat grey halo that makes a design look dated.

Use low-opacity dark colour rather than pure black: rgba(15, 23, 42, 0.08) reads far more naturally than rgba(0, 0, 0, 0.5). For depth hierarchy, layer two or three shadows — a tight one for the contact edge and a wider, softer one for ambient occlusion — and increase elevation as an element becomes more interactive: resting cards sit low, hovered cards lift, modals sit highest.

Shadows are composited on the GPU but large blur radii on many elements can cost paint performance, so prefer transform and opacity transitions on hover. Also check contrast in dark mode, where shadows nearly disappear and a subtle border or lighter surface usually communicates elevation better.

Frequently asked questions