Shadows & Elevation

Shadows in UI design simulate light hitting elevated surfaces, creating depth perception. Elevation—the conceptual distance between a surface and the background—is communicated primarily through shadow properties: offset, blur, spread, and opacity. Natural shadows are complex: they have a crisp, dark component near the object and a softer, lighter component cast by directional light. Modern CSS shadow techniques layer multiple box-shadows to approximate this complexity.

stellae.design

Visual Design

Why It Matters

Shadows and elevation create a visual hierarchy that tells users which elements sit above others and which are interactive. They provide depth cues that guide attention toward floating actions, modals, and cards without relying solely on color or size. When used inconsistently, elevation breaks the spatial metaphor and leaves users uncertain about what is clickable or dismissible.

Real-World Examples

Material Design elevation system

Google's Material Design defines a systematic set of elevation levels measured in density-independent pixels. Each level maps to specific shadow values and interaction states, giving designers and developers a shared language for spatial hierarchy across every component.

Apple's visionOS depth layers

In visionOS, elevation is literal — UI panels float at different distances from the user in three-dimensional space. Shadows and lighting respond dynamically to head position, reinforcing spatial relationships and making interactive surfaces feel tangible.

Counter-example

Inconsistent card shadows across pages

When different pages use different shadow intensities for cards at the same conceptual level, users lose the ability to interpret depth consistently. A card that appears elevated on one screen and flat on another sends mixed signals about interactivity and importance.

Role-Specific Guidance

Common Mistakes

• A common error is applying heavy shadows uniformly, which flattens the hierarchy by making everything appear equally elevated. Designers sometimes use colored shadows decoratively without considering whether they communicate meaningful depth differences. Developers often hardcode shadow values per component instead of referencing shared tokens, leading to drift as the system evolves.