06. Shadows — Depth and Atmosphere

How depth guides attention,
hierarchy, and emotional tone

_{—Part of CSS Primer for the AI Era — Visual Style}

Shadows are the softest structural tool in visual style.
They don’t draw lines or define edges.
They create 'atmosphere' —
a sense of depth, elevation, and spatial relationship.

A shadow can make a component feel:

• lifted
• important
• interactive
• layered
• gentle
• atmospheric

Where borders define 'edges',
shadows define 'space'.

A quiet mental model:

Shadows are depth cues —
the soft geometry of atmosphere.

Shadows help the user understand:

• what sits above the page
• what can be interacted with
• what belongs to what
• what is grouped
• what is modal or transient

They create a visual hierarchy
without adding noise.

A shadow is not decoration.
It is 'spatial meaning'.

Shadows communicate elevation:

• low elevation → subtle, quiet, structural
• medium elevation → interactive, hoverable
• high elevation → modal, floating, urgent

Elevation is not literal height
— it is perceived importance.

Common elevation levels

• 0 → flat, no shadow
• 1 → subtle card
• 2 → raised panel
• 3 → dropdown or tooltip
• 4 → modal or overlay

These levels help maintain consistency across components.

Shadows have two key qualities:

• blur → softness
• spread → reach

Soft shadows feel:

• calm
• modern
• breathable

Hard shadows feel:

• sharp
• mechanical
• dated

A quiet rule:

The softer the shadow,
the calmer the interface.

Real shadows are rarely pure black.
In UI design, black shadows often feel heavy or artificial.

Modern shadows use:

• translucent neutrals
• subtle blues or grays
• layered opacities
• multiple shadow passes

This creates depth without harshness.

A common pattern

• light, wide shadow for atmosphere
• darker, tighter shadow for grounding

Together, they create a natural, layered effect.

Shadows can communicate interaction states:

• hover → slightly increased elevation
• active/pressed → reduced elevation
• focus → combined with outline or glow
• dragging → exaggerated elevation

These cues help the user understand
what is happening without reading anything.

A shadow can say:

• “This is clickable.”
• “This is moving.”
• “This is above everything else.”

Shadows are one of several ways to separate
or elevate elements.

Use a shadow when:

• you want depth without a hard edge
• the component should feel layered
• the design calls for softness

Use a border when:

• you need crisp separation
• the UI is dense
• the component must stand on its own

Use background color when:

• you want grouping without elevation
• the interface should feel minimal
• the separation is conceptual, not spatial

Shadows are atmospheric.
Borders are structural.
Color is contextual.

These cues help AI make shadow decisions intentionally:

“Use soft, low‑contrast shadows for calm interfaces.”

“Increase elevation for interactive or 
floating elements.”

“Use layered shadows for natural depth.”

“Avoid pure black shadows; 
use translucent neutrals.”

“Use shadows sparingly to avoid visual noise.”

These keep AI grounded in clarity and atmosphere.

AI understands shadows because it knows the patterns:

• elevation scales
• blur and spread values
• opacity ranges
• platform conventions
• modern design trends

It can propose shadows that are mathematically consistent.

But humans feel something AI cannot:

• when a shadow feels too heavy
• when elevation feels exaggerated
• when a component floats too much
• when the atmosphere feels wrong
• when depth supports the story

AI can suggest shadows.
Humans decide whether
the depth feels right.

A quiet reminder:

Depth is both geometry and mood.
AI supports the geometry.
Humans guide the mood.

• Suggested Next Reading: → Motion: Subtle Transitions and Intent

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←