Skip to content
Prompt engineering

When to say 'no gradients' in a prompt

'No gradients' is the most common constraint in Motif's briefs and the most misunderstood. When the rule produces cleaner work, when it backfires into flatness, and the gradient vocabulary that lets you use the effect without being used by it.

Intermediate2 min read (computed · recorded 8)updated 2026-09-10promptsgradientsconstraintsai

Why the rule exists

Models love a gradient the way a teenager loves eyeliner: as the default answer to 'make it look designed'. A prompt without a gradient rule reliably produces the purple-blue hero fade, the glassy button sheen, the text gradient on the headline — all at once, all unearned. The rule exists to force the model to design with structure and type instead of reaching for the cheapest form of depth.

  • Say it when the product is information-dense: dashboards, docs, data products — gradients compete with data, and flat colour with strong type reads calmer and faster.
  • Say it when the brand is already loud: a saturated brand needs flat application, not another layer of drama underneath it.
  • Say it when you want the model to prove hierarchy: 'no gradients — depth must come from spacing, rules and shadow' forces the layout to do the work.
  • Skip the rule when the product is atmospheric by nature: hero-grade motion pieces, abstract brand pages, generative backdrops — a disciplined gradient (one, slow, directional) is the right tool and the rule would fight the brief.

When the rule backfires

The backfire is flatness-as-punishment: some models respond to 'no gradients' by flattening everything until the page has no depth language at all — no elevation, no scrims, no light. The fix is to replace the negative with a positive depth vocabulary: 'no gradients; use layered panels, subtle shadows and a scrim for the hero' — the model needs a permitted path to depth, or it will take the nearest one, which is none.

gradient-vocabulary.md
Instead of a blanket ban, name the allowed depth:
- "one slow radial glow behind the headline, nothing else"
- "flat panels; elevation via shadow only"
- "a single 2-stop tint on the hero, clipped to the text"
- "no gradients on UI surfaces — imagery may carry colour"

A directed gradient beats a banned gradient:
the first is a decision, the second is a void.

The decision rule

Ask what the gradient is for. If the answer is 'to make it feel less plain', ban it — plainness is a layout problem. If the answer is 'to make the light believable' (a glow behind a headline, a sky in a hero image, a sheen on glass that already exists), keep it and constrain it to one. The constraint that works is not 'no gradients'; it is 'one gradient, with a job, and the model must name it in the brief'.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.