Key insights
- You don't need to redesign to add depth. Same layout, same colors — three CSS properties do the whole job.
- Layered shadows beat a single drop shadow: stack a tight one (~2px), a mid spread (~12px), and a large ambient one (~32px) to mimic how real light falls off.
- Parallax scroll sells distance by moving layers at different speeds — background slow, midground medium, foreground fastest (roughly 1x / 2.5x / 5x).
- Z-translation on hover makes an element react to the cursor: lift it toward the viewer with
translateZplus a slightscale(1.03)and a soft glow. - Depth also lives in the border and shadow intensity, not just position — brightening the border on hover reinforces the lift.
- Stack all three techniques and the interface reads as fully dimensional while still feeling flat and clean.
Do / Don't
- Do: Stack multiple shadows at increasing blur and offset instead of one flat drop shadow
- Do: Keep hover lifts subtle — a few pixels plus ~3% scale reads as physical, not cartoonish
- Do: Vary scroll speed per layer so background, mid, and foreground imply real distance
- Don't: Redesign the layout or palette to fake depth when three properties already do it
- Don't: Push parallax offsets or hover scale so far they pull attention off the content
