The purple gradient check: what it flags and what to use instead
The purple gradient check looks through a page's CSS for any gradient that includes purple, violet or indigo. It's one of the Critic's nineteen design checks, and one of the few the design gate also enforces, so a page that fails it can't be published until the gradient is gone. The usual fix is simpler than the gradient: a flat surface, a real photograph, or one colour used with intent.
Why this gradient became the giveaway
A violet-to-blue wash behind a centred headline turned up on so many startup pages and generated sites that visitors now read it as a default rather than a choice. AI models reproduce it because it's everywhere in what they learned from, and component libraries make it a one-line class. The trouble isn't the colours themselves. It's that the gradient fills the space where a decision should be: it says modern without saying anything about the business, and white text crossing from a pale to a saturated stop is often hard to read halfway along. The purple gradient websites guide covers the design history.
What the check matches
The rule is deliberately literal so that anyone can see why a page failed. It finds the text gradient( in the CSS and looks at what follows, up to the first closing bracket, for either of two things:
- A colour keyword: purple, violet or indigo.
- One of five hex values that generated code uses for those hues:
#7c3aed,#8b5cf6,#a855f7,#6366f1and#9333ea.
Because it matches the text gradient(, it covers linear, radial and conic gradients and their repeating forms alike. It doesn't need a blue in the mix: a purple-to-pink or a violet-to-white gradient fails as well. A flat purple fill without a gradient passes.
Two checks, one rule
| Critic | Design gate | |
|---|---|---|
| When | While you work in the builder | When you publish |
| What it reads | The page's style blocks | Style blocks and inline style attributes |
| Effect of a failure | A cross in the Report tab | Publishing refused, with the gradient quoted |
The gate's failure message quotes the matching part of the gradient, so you can find it. App builds written by the model are repaired against the same gate before you see them. The wider picture is on the design gate page.
What it misses, and what it flags wrongly
Text matching has edges in both directions, and they're worth knowing:
- Other ways of writing purple. A purple given as a different hex value, or in
rgb(),hsl()oroklch(), isn't recognised. - A bracket before the purple. Because the check stops at the first closing bracket, a gradient that starts with an
rgba(…)stop and only then names violet slips past. - Names that only mention a colour. A gradient built from a CSS variable called
--violet-tintis flagged even if that variable holds a neutral grey, because the word is in the text. - Pictures. A purple gradient baked into a photograph or an image file isn't CSS, so it isn't checked.
Passing the check doesn't make any gradient a good idea, and failing it on a variable name is easily fixed by renaming the variable.
What to use instead
- A flat surface from the palette. Every Anticode design system has a background and a slightly darker surface tone. A hero on the plain background with a strong headline looks more confident than one on a wash.
- A real photograph. A picture of the place, the product or the people does what the gradient pretended to: it gives the page a mood, and it's specific to you.
- One colour, used for action. Put the brand colour on buttons and links rather than across the background; see action colours.
- If purple is the brand, keep it and drop the gradient. None of the eight preset action colours is purple, but in Pro mode the code editor accepts an exact hex for the action colour token.
Anticode's own design engine draws only two gradients: the faint grid lines behind the Technical system and the dark overlay that keeps text readable on Luxury's full-width photo. Neither uses purple, so a fresh design-engine page passes, and a failure points at something added afterwards.
Limits
- It checks code, not appearance. It never looks at a screenshot, so it can't tell whether a gradient that passes still looks generic.
- It runs on Anticode pages. It doesn't scan other sites, though the rule is simple enough to apply by hand.
Questions people ask
Will a purple gradient stop me publishing?
Yes. The design gate refuses a page whose CSS, including inline styles, has a gradient naming purple, violet or indigo or using one of the five listed hex values.
Is a blue-only gradient allowed?
The check passes it. Whether it suits the page is a separate question.
My brand is purple. Can I use it?
Yes, as a flat colour. Set the action colour to your hex in the code editor in Pro mode; only gradients are refused.
Why was my page flagged when there's no purple on screen?
Probably a variable or class name inside a gradient contains violet, indigo or purple. Rename it and the check passes.