Shadows express how elements stack

What it is

A dialog sits on a list; cards in the list sit on the page ground. How does anyone know who is on top? In a light UI it is often not a thicker stroke. The cast shadow is speaking height: the softer and farther the penumbra, the farther the object from the ground, and stacking on the z axis (z-depth / elevation) is read off that. Remove the shadows and the three surfaces are one sheet of paper. Click targets shift from “the floating layer” to “any block that looks clickable.” Shadow here is a diagram of stacking, not a richer card.

Why it happens

The visual system interprets darkening attached to an edge and spreading to one side as umbra and penumbra after light was blocked. Penumbra width encodes distance: objects on the ground have almost none; raised objects grow a wider, paler penumbra. That is a pictorial depth cue, working with occlusion and perspective. Interfaces have no real lamp. Draw a darkening that obeys this physics below or outside the object, and perception restores “this is higher than that.” Strokes and fill contrast can still separate regions; they say “these are different blocks,” not “this one rests on that one.” When stacking must say a modal blocks the layer below, or a floating action rests on a list, missing height leaves only the overlapping edge to guess from.

Studying it

For one stacking structure, compare shadow, no shadow, and stroke-in-place-of-shadow. Ask which block can be dragged and which is blocking content. The independent variable is the type of height cue; dependents are accuracy of stacking judgements and how often a buried control is treated as clickable. Subjective height ranking is available too: vary only shadow spread on a set of cards and see whether rank rises monotonically with spread. If stacking accuracy falls to chance without shadow, the shadow is carrying the z axis, not decoration.

Where it stops holding

When objects already overlap heavily (a drawer covering 80% of a list), occlusion is enough and shadow is a duplicate code. A flat infographic or a print piece has no “interactive layer”; drawing height then falsely promises something that can be lifted. On a dark ground there is almost no room to darken, so this mechanism fails and another channel is required — pushing the shadow darker into a blotch will not save it. If a moving object’s shadow does not travel with it, height reading collapses during the displacement.

Applying it

• Write heights for layers that actually exist: page ground, scrolling content, floating actions, modal. Give each a different spread. Do not let every card share one “nice soft shadow.”
• Decorative blocks that do not stack should not cast. They will be read as a draggable, tappable, dismissible layer.
• A modal must throw a stronger height difference onto the layer below than a card does (usually plus a dimming scrim), or it will be seen as a large card rather than a layer that blocks interaction.
• Check: kill every drop shadow with a style switch, leaving strokes and fills. Ask people to mark pairs they can still rank as “this rests on that.” Pairs they cannot rank are where shadow was the only stacking cue — keep it. Pairs they still can rank had a duplicate shadow — cut it.

Related

• Same group: F3.06.2 Elevation levels need a consistent light-source assumption · F3.06.3 Shadows are almost invisible on dark grounds
• Nearby: F2.08.2 Card borders and shadows consume a lot of space · F5.08 Hierarchy in dark mode · F7.07 Motion expressing spatial relations
• Search terms: elevation · z-depth · drop shadow · pictorial depth