| name | depth |
| description | Use when adding shadows, working out elevation, making elements feel raised or inset, designing flat UIs with subtle depth, or layering components for visual interest. Covers light-from-above, shadow elevation systems, two-part shadows (direct + ambient), depth in flat designs via lightness, and overlapping elements to create layers. |
Depth & Elevation
When to use this skill
- A button or card needs to feel "raised" off the page.
- Form inputs or wells need to feel inset / recessed.
- A shadow system is being defined for a design system.
- A flat design feels lifeless and needs subtle depth without losing its aesthetic.
- Sections feel disconnected and could benefit from layered overlap.
- Modal dialogs, dropdowns, and toasts need consistent elevation cues.
Core stance
Depth in UI is a simulation of physical light. Every cue should be consistent with one mental model: light coming from above. When elements feel layered, the eye understands relative importance without you saying anything.
Principles
1. Light comes from above. Every depth cue derives from this:
- A raised element catches light on its top edge (lighter) and casts shadow below (darker).
- An inset element is shadowed at the top (the lip above blocks light) and lit at the bottom (the angled edge faces up toward the sky).
To make a button feel raised:
- Add a subtle inset top border or lighter top edge.
- Add a small dark drop shadow with a slight vertical offset (
box-shadow: 0 1px 3px rgba(0,0,0,0.2)).
To make an input feel inset:
- Add a slightly lighter bottom edge (border or inset shadow with negative Y).
- Add a small dark inset shadow at the top.
Hand-pick the lighter color — overlaying semi-transparent white desaturates the underlying color.
2. Shadows convey elevation, not just presence. Position elements on a virtual z-axis: more elevation → larger and softer shadow. The closer something feels to the user, the more their eye is drawn to it.
A working 5-step shadow system:
| Use | Shadow |
|---|
| Slight raise (button, raised card) | small offset, tight blur |
| Floating (dropdown, popover) | medium offset, medium blur |
| Lifted (sticky bar, tooltip) | larger offset, larger blur |
| Modal | large offset, large blur |
| Highest (drag preview) | very large offset, very soft blur |
Use shadow change as interaction feedback: drag-elevates (bigger shadow), click-flattens (smaller or none).
3. Real shadows have two parts. Inspect any well-crafted shadow on the web and you'll see two box-shadow layers, not one:
- Larger soft shadow with vertical offset and big blur — light from above, partially blocked by the element.
- Tighter darker shadow with little offset and small blur — ambient light blocked from reaching directly underneath.
Combining them gives you a soft falloff with crisp edges:
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.07),
0 5px 15px rgba(0, 0, 0, 0.1);
The ambient (tighter) shadow shrinks toward zero as elevation rises — a high-floating modal has almost no contact shadow.
4. Even flat designs can show depth. Without shadows:
- Lighter than background → feels closer (raised).
- Darker than background → feels further (inset, like a well).
Or use a solid (no-blur) shadow with vertical offset — keeps the flat aesthetic but suggests a small lift.
5. Overlap to create layers. One of the most effective ways to feel "designed":
- Offset a card so it crosses the boundary between two background sections.
- Make a panel taller than its parent so it pokes out top and bottom.
- Push carousel arrows past the edge of the carousel.
- Avatar overlapping a banner image.
For overlapping images that risk visual clash (matching background colors bleeding into each other), use one of:
- A border that matches the page background — creates a visual gap.
- A semi-transparent inset box-shadow — subtler than a border, doesn't clash with image colors.
Quick reference
- Light is always from above. Top edge brighter, bottom edge darker for raised elements.
- Don't overlay semi-transparent white for highlights — pick a color in the same hue.
- Shadow for buttons:
0 1px 3px rgba(0,0,0,0.2).
- Shadow for dropdowns:
0 4px 6px rgba(0,0,0,0.1).
- Shadow for modals:
0 15px 35px rgba(0,0,0,0.2).
- Two-part shadow recipe: a soft offset shadow + a tighter ambient shadow.
- Flat depth: lighter-than-bg = closer, darker-than-bg = further.
- Avoid making things photorealistic — borrow cues, don't replicate physics.
Attribution
Heuristics distilled from Refactoring UI by Adam Wathan & Steve Schoger (https://refactoringui.com). Independent skill package; not affiliated with or endorsed by the authors.
