Gradients in web design: ones that come from the subject, and the default to avoid
Good gradients in web design describe something real: light falling across a wall, the sky at dusk, the sheen on a material, or a scrim that keeps text readable over a photograph. The gradient that reads as generic is the decorative purple-to-blue wash behind a headline, because it says nothing about the business and appears on thousands of generated pages.
A short history on screen
Gradients came and went with the fashions of interface design. Early 2000s web buttons and the glossy, skeuomorphic interfaces that followed used them to imitate plastic and glass. Flat design pushed them out in favour of solid fills. They returned in a brighter form: vivid two-colour blends in app icons and brand identities, then soft “mesh” backgrounds. Generated sites took the last step and made one particular blend, violet into blue, the default hero background.
Gradients that come from the subject
- Light
- A barely visible shift from a warm to a slightly cooler neutral across a large section, the way daylight falls across a room. Most visitors never notice it; they just feel the page is less flat.
- Sky and time of day
- A travel company, an observatory or a rooftop bar can use the actual colours of dusk or dawn, sampled from its own photographs.
- Material
- A metallic or satin sheen for a jeweller or a perfume house, kept to small surfaces such as a product panel.
- Scrims
- A dark gradient over the bottom of a photograph so white text on top stays readable. This is the most useful gradient on the web, and it's functional, not decorative.
- Data
- Heatmaps and sequential charts, where a gradient encodes a value from low to high.
The technical traps
- Muddy midpoints. Blending two saturated complementary colours in the default sRGB space passes through a dull grey-brown in the middle. CSS now lets you choose the interpolation space, for example
linear-gradient(in oklch, …), which usually keeps the middle more vivid; adding a third stop in between is the older fix. - Banding. Long, subtle gradients across a large area can show visible steps, especially on dark grounds and cheaper screens. Shorten the distance, increase the difference slightly, or add a very fine noise texture.
- Text contrast. Text on a gradient has a different contrast ratio at every point. Check it against the lightest area it crosses (for light text) or the darkest (for dark text). WCAG 2.2 asks for 4.5:1 for normal text.
- Gradient text. Headlines filled with a gradient using
background-clip: textcan fall below contrast at one end, and some forced-colour and high-contrast modes drop the effect entirely. Give the text a solid colour fallback.
The purple default and why it reads as generated
The violet-to-indigo-to-blue blend is the colour of a thousand landing page templates and, more recently, of the hero sections models produce when nobody specifies a palette. It isn't ugly. It's that it has no source: it isn't the shopfront, the product or the light in the photographs. Visitors who have seen it repeatedly read it as “template” before they read the headline. Purple gradient websites explains how the pattern spread.
If a brand genuinely is purple, use its exact purple as a solid action colour and let photography carry the rest. A solid colour taken from the brand is more recognisable than a blend of it with blue.
Do's and don'ts
| Do | Don't |
|---|---|
| Sample colours from the business's own photos or materials | Pick a blend from a gradient generator because it looks pleasant |
| Keep decorative gradients subtle and large | Put strong gradients on buttons, cards and backgrounds at once |
| Use scrims to protect text over images | Rely on a gradient behind text without checking contrast |
| Choose an interpolation space or add a midpoint stop | Accept a grey dead zone between two vivid colours |
| Let one gradient have one job | Repeat the same gradient in every section until it's wallpaper |
Gradients in Anticode
The Critic flags any gradient that mixes purple, violet or indigo on every build, and since 23 October 2026 the design gate also refuses to publish a page with a purple-to-blue gradient. Other gradients are a design choice, not a failure. Anticode's own design systems use them only where they do a job: the full-bleed photo hero lays a dark scrim gradient over the photograph so white text stays readable, and the Technical system draws its blueprint grid with thin repeating gradients.
Questions people ask
Are gradients still used in web design?
Yes, mostly as subtle lighting, as scrims over photographs and in brand identities that are built around them. Loud decorative gradients have become a sign of template sites.
Why do gradients look muddy in the middle?
Blending saturated colours in sRGB passes through greyish tones. Interpolating in a perceptual space such as oklch, or adding a midpoint stop, avoids it.
Is text on a gradient accessible?
It can be, if the text meets contrast against the least favourable part of the gradient it sits on. Check that point, not the average.