Six ways to make a flat surface have depth

The cues, in order of strength

A screen and a sheet of paper are flat. Depth in both is a set of cues the visual system reads, and they are not equally powerful. Knowing the order tells you which one to reach for and why the weak ones keep failing.

1. Occlusion. One thing covering part of another. Unambiguous, works at any distance, and stronger than every other cue combined — if occlusion says A is in front, nothing overrides it. In flat design this is the most useful cue by a wide margin and the most underused: one card overlapping another establishes order instantly, with no shadow required.

2. Relative size. Two things known to be the same size, one smaller, so it is further away. Depends on the viewer knowing the real sizes.

3. Height in the frame. Objects further away sit higher in the visual field, up to the horizon. This is why a small object placed high reads as distant and the same object placed low reads as small.

4. Texture gradient. A repeating texture — cobbles, tiles, a crowd — compresses with distance. Useful in photographs, rarely constructible in layout.

5. Aerial perspective. Distant things are lower in contrast, less saturated, lighter, and slightly blue, because you are looking through more atmosphere. This is the one you can apply deliberately to any flat artwork and it is enormously effective: push background elements towards the background colour and pull contrast out of them.

6. Blur. A shallow depth of field separates a subject from its background. Real in photographs; simulated by filter: blur() in CSS or a Gaussian blur in GIMP or Krita.

Shadow appears nowhere in this list as a primary cue, and that is deliberate. A shadow is a depth cue only if the light is consistent, which brings us to the failure.

The light has one direction

A shadow tells you where an object sits relative to a surface only because your visual system assumes a single light source, and by default assumes it is above. That assumption is strong enough that a pattern of circles shaded light-on-top reads as bumps and the same pattern shaded dark-on-top reads as dents — turn the page upside down and they swap.

So shadows in a design must all agree. One light direction, one angle, one softness, applied across everything. An interface where cards cast a shadow downwards, a modal casts one in all directions, and a button has a shadow going up is not a design with depth; it is a design with three contradictory claims about a light that does not exist, and the reader's depth reading collapses.

Practical settings for an interface, assuming light from above:

--shadow-sm: 0 1px 2px  rgb(0 0 0 / 0.06);
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);

Note what these have in common: the vertical offset and the blur grow together, and the opacity stays low. A real shadow from a light directly above is soft and faint. A hard 50% shadow at a 45-degree offset is not a shadow; it is a sticker effect, and it was fashionable in 1998 for that reason.

Aerial perspective in a layout

This is the cue most worth learning to apply consciously, because it costs nothing and works everywhere.

To push something back: reduce its contrast against the background, reduce its saturation, and move its lightness towards the background's lightness. To bring something forward: do the opposite.

Concretely, for a decorative illustration behind content, taking it to 40% opacity does all three at once against a light background. For a background photograph behind text, reducing contrast by pulling the blacks up is more effective than reducing brightness, because it is the contrast that carries the foreground reading.

This is also the principle behind disabled states, which are pushed back, and behind a modal dimming the page behind it.

Depth in interfaces is shallow

A last constraint. However many cues are available, an interface almost never needs more than two levels of depth: the page, and a thing above the page. Occasionally three, with a modal above a card above a page.

A design that seems to need four or five levels is usually telling you that the information architecture is wrong — that too many things are trying to be contextual at once. The honest fix is structural rather than visual, and adding a fifth shadow value will not supply it.