Visual Polish

Depth & Elevation

Creating visual layers

Key Insight

Depth and elevation use shadows, layering, and light simulation to create a sense of physical dimension in flat interfaces—communicating which elements are interactive, elevated, or contextually above others.

Key Points

  • •Emulate a consistent light source—every shadow should agree on where light comes from
  • •Shadow size and softness convey elevation: tight shadows = slightly raised, large soft shadows = floating high
  • •Use two-part shadows for realism: a larger soft shadow (ambient) plus a smaller sharp shadow (direct light)
  • •Even flat designs have depth through color differences, overlapping elements, and layering
  • •Shadows can have two parts—combining ambient and direct shadows mimics real-world lighting
  • •Overlap elements to create layers—breaking out of boxes adds visual interest
  • •Use fewer borders—shadows, background differences, or spacing often work better
  • •[FIGURE — Light source consistency] Shows: Interface with shadows all pointing same direction vs mixed directions. Teaches: Consistent light direction creates cohesive depth; inconsistent shadows feel "off" even if users can't articulate why. Reproduce as: Interactive light source position control.
  • •[FIGURE — Elevation levels] Shows: Elements at different elevations—flat, raised button, dropdown, modal—with corresponding shadow intensity. Teaches: Shadow size/softness should map to implied z-position; higher elements cast larger, softer shadows. Reproduce as: Elevation scale with shadow CSS values. Data: 0/raised/elevated/floating/overlay levels.
  • •[FIGURE — Two-part shadow technique] Shows: Single shadow vs two-part shadow (ambient + direct) on same card. Teaches: Combining a soft ambient shadow with a sharper direct shadow creates more realistic, dimensional appearance. Reproduce as: Shadow editor with ambient/direct controls.
  • •[FIGURE — Inset vs raised buttons] Shows: Button with inset top highlight and bottom shadow simulating 3D shape. Teaches: Buttons can use opposing gradients/shadows to appear raised and clickable. Reproduce as: Button with adjustable inset/outset styling.
  • •[FIGURE — Flat depth techniques] Shows: Interface using only background color differences to create depth layers without shadows. Teaches: Slight background color variations create plane separation without any shadows. Reproduce as: Layer stack with background color controls.
  • •[FIGURE — Overlapping elements] Shows: Card with image extending beyond card boundaries creating visual interest. Teaches: Breaking out of containers and overlapping elements creates dynamic depth and visual interest. Reproduce as: Card with adjustable element overflow.
  • •[FIGURE — Borders vs alternatives] Shows: Same layout with borders vs shadows vs spacing vs background differences. Teaches: Borders are often the bluntest tool—shadows, colors, and spacing create softer separation. Reproduce as: Comparison grid with different separation techniques.

Guidelines

  • ✓Define 3-5 elevation levels in your design system: flat (0), raised (card), elevated (dropdown), floating (modal), and overlay (toast)
  • ✓Keep shadow direction consistent—mixing top-lit and bottom-lit shadows in one interface creates subconscious unease
  • ✓For raised buttons, use a subtle inset highlight on top (simulating light) and a small shadow below (simulating depth)
  • ✓Replace borders with box-shadows where possible—shadows feel softer and more modern than hard lines
  • ✓Use background color shifts (slightly darker/lighter panels) to create depth without any shadows
  • ✓Interactive elements should feel elevated (castable of shadows) in their resting state—this communicates clickability

Want to learn this interactively?

Experience hands-on experiments and test your understanding.

Start Learning
🔥

Practice this topic

Active recall — strengthens long-term retention

Related Topics