Depth Cue
Visual signals that create a sense of three-dimensional depth on a flat screen.
Plain English
Screens are flat but our brains expect depth. Depth cues trick the eye into perceiving layers — a modal "in front of" the page, a card "on top of" the background, a tooltip "floating above" its trigger. The main tools: shadows (nearer objects cast shadows), scale (nearer objects appear larger), blur (things further away are softer), overlap (foreground elements cover background ones), and background colour contrast (lighter backgrounds recede). Using these consistently creates a physically intuitive interface.
Technical
Depth cues in CSS: box-shadow (direct light simulation), z-index (stacking order), scale/transform (perspective metaphors), blur via filter/backdrop-filter (depth of field), background lightness (dark = background, light = foreground in most schemes), and border contrast (high-contrast borders appear closer). Material Design built an entire 24dp elevation system around depth cues. Avoid mixing incompatible cue systems — e.g. flat design (no shadows) with heavy drop shadows on one element.
Live Demo
Layering
Overlapping + z-index shows depth
Shadow elevation
Color
Foreground item
High contrast — close, interactive
Background item
Low contrast — distant, passive
Depth cues tell users which elements are interactive and which are background.
Usage
✓ Good usage
A tooltip with a sharp soft shadow floating above a card, which itself has a soft shadow above the page background — three visual layers clearly communicated.
✗ Bad usage
A flat-design page with a single element sporting a large drop shadow — the depth cue is inconsistent with the rest of the design system, making it look accidental.
Recommended values
- Page layer: base background colour (lightest)
- Surface layer: slightly lighter (cards, panels)
- Overlay layer: shadow + z-index 100+
- Modal layer: strong shadow + z-index 300 + backdrop overlay
- Tooltip layer: sharp drop shadow + z-index 400
Common mistakes
- Mixing depth cue systems (neumorphism + flat + drop shadow) in one interface.
- All elements at the same perceived depth — no hierarchy of layers.
- Shadows on elements that are conceptually "in" the page (text, icons) — shadows should only appear on elements that "float".
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Establish a 4-layer depth system: page (base), card (soft shadow), dropdown (medium shadow), modal (strong shadow + overlay). Be consistent — elements at the same conceptual layer always have the same depth treatment.