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.
🔥
Practice this topic
Active recall - strengthens long-term retention