One light source, agreed in advance
Every depth cue in an interface simulates the same scene: light shining down from above the screen. That single assumption decides where every highlight and every shadow belongs — and breaking it is why some designs feel subtly off.
Raised elements catch light on top and cast shadow below. Sunken elements do the reverse: their top edge sits in shadow, their bottom edge catches light. Get those two patterns right and elements read as raised or sunken before any other styling registers.
Raised: lighter top, shadow below
A button that should feel pressable follows the raised pattern: a slightly lighter top edge (a subtle inset highlight), a shadow tucked under its bottom edge. The effect works at almost imperceptible strength — 1px of lighter border-top, a shadow offset a few pixels down.
The raised look, built left to right. Then flip the light and watch the third one become a hole.
Sunken: shadow on top, light below
Inputs, wells, progress-bar tracks and toggles-off read as carved into the surface. The recipe mirrors the raised one: a small inset shadow at the top, a lighter bottom edge where the light would catch the lip.
This is why an inset shadow makes a text field feel like a place to put something — it’s an empty container, visually below the page surface, waiting to be filled.
Sink the containers into the surface. Find the depth that reads as a well, not a bevel.
Consistency beats strength
The light direction matters far more than the intensity. A barely-visible highlight in the right place does more than a strong one in the wrong place — and a single element lit from below can make a whole panel feel wrong.
Audit for agreement: every shadow on screen should fall downward, every highlight should sit on a top edge, every inset should shade its top. One shared light source, everywhere, always.
The takeaway
Simulate one light source above the screen. Raised elements: light top edge, shadow below. Sunken elements: shadow at the top, light at the bottom lip. Keep the strength subtle and the direction absolutely consistent — depth cues that disagree about the light read as broken, not flat.