Photos As CSS Gradients

These works distil my photographs into minimalist colour gradients, keeping the feeling of an image while using the least possible information. I’m interested in what remains when the objects, edges and detail fall away, and colour becomes the subject.

What is a gradient?

Technically, each piece is a CSS linear-gradient: a direction, usually vertical, and a sequence of colours placed along that direction. The colours are sampled from a photograph and arranged as measured stops, so the image becomes an emotional contour rather than a literal scene.

The work is connected to the radical restraint of artists such as Piet Mondrian and Mark Rothko. Their paintings show how relationships between colour, space and proportion can carry mood without depicting a subject. I’m exploring that same question computationally: how little can I show while still allowing a place, a moment or a feeling to come through?

Why it works

Emotion often lives in transitions: a change in light, the fall of a shadow, or the movement from one colour into another. Removing detail can make those shifts more direct. Because the artwork is defined by colour and mathematics rather than fixed pixels, it can also scale from a phone screen to a large print without losing fidelity.

How I make them

1. I choose a photograph with a strong flow of colour.
2. I use custom software to sample the key colours across the image.
3. I define the colour stops and offsets as a CSS linear gradient.
4. I adjust the stops and proportions until the gradient feels right.