Gradient text headlines: why generated pages use them, and what they cost readers

How gradient text in CSS works

There's no property for coloured-gradient text. Instead, a gradient is set as the element's background, the background is clipped to the shape of the letters with background-clip: text, and the text colour is made transparent so the background shows through. MDN's background-clip reference shows the pattern, and notes that the effect does little if the text is opaque. For years it needed the -webkit- prefix, which is why snippets for it were copied widely and still carry both versions.

Because the snippet was everywhere, in template galleries, CSS tip threads and component library demos, models trained on that material reproduce it readily. Asked for a "modern" hero, they tend to set the headline in a gradient, frequently just the last word or two, in the same violet-to-blue family as the purple gradient background.

Why it reads as generated

• It's emphasis without a reason. The highlighted words are usually the vaguest ones: "faster", "smarter", "everyone". If a word needs a rainbow to matter, the sentence needs rewriting.
• It pairs with other defaults. Gradient text, a dark hero, a glow behind the button and three emoji cards together form a recognisable template.
• It's colour with no source. The gradient rarely comes from the brand, the product or the photography; it comes from the snippet.
• It breaks the type. A single recoloured word splits the headline into two voices, so it reads as two fragments rather than one statement.

Is gradient text accessible?

It can be, but it's harder to get right than solid text. WCAG's contrast minimum applies to every part of the text against what's behind it. A gradient passes only if its weakest point does: a headline that runs from dark violet to light pink on a white ground may pass at one end and fail at the other. MDN's accessibility notes for background-clip: text add two more risks: if the background image fails to load, the text can become unreadable, so a fallback colour is needed, and support should be checked with @supports before relying on it.

1. Check the lightest and darkest stops against the background, not an average colour. Large text needs 3:1; anything smaller needs 4.5:1.
2. Set a solid fallback colour that passes on its own, and only apply the gradient inside an @supports block.
3. Print it. Browsers usually leave out background colours and images when printing unless asked, so transparent text with a gradient background can print as nothing.
4. Keep it out of body text, links and buttons altogether.

When a gradient headline can work

In a poster-like hero for an event, a music release or a game, where the colour comes from the artwork and the type is huge, a gradient can be part of the identity. Keep it within one hue family, apply it to the whole headline rather than one word, check the contrast at both ends, and use it once on the site. Gradients in web design covers gradient choices more broadly.

Calmer ways to add emphasis

Say the specific thing

Replace the highlighted adjective with a fact: "Bread out of the oven at 7" needs no colour.

Size and weight

Let the headline's scale do the work, with the rest of the page clearly smaller.

One solid colour

Set the whole headline in the text colour, and keep the action colour for the button.

A rule or underline

A single hand-drawn or hairline underline under one phrase, if the design system has one.

Photography

A strong image next to a plain headline carries more feeling than coloured letters.

What Anticode does about it

Two of the Critic's nineteen checks cover this habit. One flags a headline where a single word or two is picked out with its own element, recoloured or italicised, which is how most gradient words are made; the highlighted word check explains it. Another flags gradients that mix purple, violet or indigo anywhere in the page's styles, which catches the usual gradient text colours. Since 23 October 2026 the design gate also blocks publishing a page with a purple-blue gradient. The design systems themselves set headlines in one solid colour.

Questions people ask

Is gradient text accessible?

Only if every part of the text meets contrast against its background and there's a solid fallback colour. Check the lightest stop, not the average.

Why do AI websites use gradient headlines?

The CSS snippet for gradient text was copied widely in templates and demos, so models reproduce it when asked for something modern.

Should one word in a headline be a different colour?

Rarely. It splits the headline and usually highlights a vague word. A clearer sentence does more than a coloured one.

Sources

1. background-clip, MDN Web Docs, checked 24 October 2026
2. Understanding SC 1.4.3: Contrast (Minimum), W3C, checked 24 October 2026