Multi-layer shadows are how modern UIs feel real
If your shadow looks fake, the issue isn’t the radius — it’s that you only have one. A realistic elevation in 2026 design uses two or three layered shadows: a tight, low-opacity shadow that hugs the element to imply contact with the surface, and a wider, more diffuse shadow that suggests ambient occlusion further away.
Material Design and HIG both build their elevation tokens this way. So does every popular design system shipping in 2026.
A practical recipe
Start with two layers:
- Layer 1: 0px x, 1px y, 2px blur, 0 spread, color matching the surface, ~10% opacity.
- Layer 2: 0px x, 8px y, 24px blur, -4px spread, same color, ~12% opacity.
That gives you a believable elevation that scales — push y and blur higher for “lifted higher” states.
Use cases
- Card states: stack three layers for resting / hover / focus.
- Buttons: a sharp inset shadow turns into a “pressed” state on click.
- Modal overlays: a heavy soft shadow grounds the modal above the page.
- Skeleton placeholders: a soft inset shadow signals empty space.