The assumption inside every gradient

A flat colour sits on the screen. A gradient recedes. That is the perceptual bargain: the eye reads a value shift as illumination falling across a curved or angled surface, and the brain infers a third dimension that the screen does not actually contain. This is why gradients survived the flat-design purge of the early 2010s and came back without apology — they are doing real spatial work, not decorating.

The trouble lives in the reproduction. A gradient is a continuous function; every display, format and output stage reduces it to a stepped approximation. On a well-calibrated panel with sufficient bit depth, the steps are fine enough to be invisible. On a cheaper IPS or TN screen — the kind still shipping in budget laptops and secondary monitors — 8-bit colour with no dithering renders a smooth sky as a set of visible bands. The gradient that signalled depth now signals a production error. The spatial illusion collapses into a striped rectangle.

A fanned colour swatch book under a lamp
Two saturated members far enough apart to argue, and a long tail of near-neutrals that cannot.Photo: Tima Miroshnichenko / Pexels

JPEG compression does the same thing in a different way. The DCT blocks that make JPEG efficient are exactly the wrong tool for a large area of slowly shifting tone: compression artefacts appear precisely where the gradient is most legible and most important. Export a full-bleed ground as a PNG and the gradient holds; export it as a JPEG at any quality setting below about 95 and it degrades in the worst possible place.

The format problem is solvable with discipline — use CSS gradients where you can, PNG or lossless WebP where you cannot, and never rely on a compressed image for a large tonal ground. The panel problem is not solvable from the design file. It means that a gradient used as the primary spatial signal of a composition is a bet on the viewer's hardware — quiet, reasonable, and wrong often enough to matter.

A printed gradient sheet pinned flat
Printed flat, the ramp that reads as depth on a screen keeps almost none of the illusion.Photo: Pixabay / Pexels

Depth is not free. It has to survive the render.