The purple gradient website: why it reads as generated, and what to use instead

How the gradient got here

Gradients went out of fashion when flat design took over interfaces in the early 2010s, then returned a few years later in a brighter form: vivid, two-colour blends used as backgrounds, app icons and illustration fills. Technology companies adopted them widely, and blue-violet pairings became a shorthand for software, partly because blue already signalled trust and technology and violet added a sense of novelty.

From there the look spread into templates, UI kits and component library demos, where indigo and violet are common default accents. Each copy made the next one more likely. When AI models learned to produce web pages, they learned from that body of work, and a model asked for something "modern" reaches for what it has seen most. The purple gradient website is the result: not a choice anyone made for a particular business, but the average of many pages that made it for theirs.

Why it now reads as generated

Visitors don't analyse colour choices, but they recognise patterns. A violet-to-blue hero, a centred headline with one word picked out in a different colour, three cards with emoji icons beneath: the combination says "template" before a word has been read. That costs trust in ways that are hard to measure. A dentist, a joiner or a bakery behind that hero looks like it could be any business, or none.

• It carries no information. The gradient says nothing about what's sold, where, or to whom.
• It competes with the content. A saturated background takes attention from the headline and the action button.
• It makes contrast unpredictable. Text that passes on the dark end can fail on the light end of the same gradient.
• It dates quickly. Looks that become defaults age fastest.

Choosing a ground from the business

The alternative isn't grey. It's a background with a reason behind it. Some places to look:

A material

Kraft paper for a roastery, raw plaster for an interiors studio, unbleached linen for a tailor. Sampled as a flat, slightly tinted ground, a material gives warmth without decoration.

A colour the business already uses

The van livery, the apron, the label on the jar. Used as a solid band or a section ground, it ties the site to things customers have already seen.

A real photograph

The room, the work, the product, full bleed, with text on a solid panel or a darkened area for contrast. This does more for credibility than any colour.

Plain off-white or charcoal

With one action colour doing all the signalling. Quiet grounds make photographs and prices more prominent, not less.

If you genuinely want a gradient

Gradients aren't banned from good design. They describe light, depth and atmosphere well. They read as considered when they follow a few rules:

1. Stay within one hue family, such as dusk blue to a deeper blue, or cream to sand. Big jumps across the colour wheel are what look synthetic.
2. Keep it subtle. A change of a few steps in lightness is often enough to give a surface depth.
3. Give it a source. A sky in the photography, the colours of the product, the light at the time of day the business opens.
4. Check contrast at the worst point. Measure text against the lightest area it crosses, not the average.
5. Don't put it everywhere. One gradient surface per page at most.

When your brand is purple

If purple is genuinely your brand colour, use it. What reads as generated is the purple-to-blue blend as a hero background, not the colour. A solid, specific purple, used for the action colour or as a bold flat section, says something; a violet fade into indigo says "default". Choose the exact shade deliberately, check it against white and dark text, and let it appear only where it has a job, as covered in how to choose an accent colour.

What Anticode does about it

Anticode's Critic flags gradients that mix purple, violet or indigo on every build, the first of the tells explained in why so many AI websites look the same. Since 23 October 2026 the design gate also blocks publishing a page with a purple-blue gradient, and the gate applies to app builds too, so the pattern can't reach a live site that way either.

The design systems avoid it in the first place: each starts from a flat ground and a single action colour. The checks target purple-family gradients specifically; they don't stop you from using a solid purple, and they won't judge whether another gradient you add is subtle or garish. That judgement, and the choice of what the background should say about the business, is still yours.

Questions people ask

Why do AI websites use purple gradients?

Models reproduce the patterns most common in the pages they learned from, and blue-violet gradients were very common in software marketing, templates and UI kits.

Is a gradient background bad for a website?

No, but it needs a reason and enough contrast for the text on it. Subtle gradients within one hue family read as deliberate; violet-to-blue blends read as default.

Can I use purple on my website without it looking AI-made?

Yes. Use a specific, solid purple with a clear job, such as the action colour, rather than a purple-to-blue blend behind the headline.