# No Gradient Text

**NEVER** · **ID:** `design-impeccable-gradient-text` · **Category:** design
**Source:** [impeccable](https://impeccable.style/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-impeccable-gradient-text

> NEVER: Use `background-clip: text` (or `-webkit-background-clip: text`) with a gradient background and a transparent text color — the glyphs then have no color, so the selection highlight paints behind invisible letters and forced-colors mode can erase the heading entirely. Set one solid color and carry emphasis with weight or size.

Set headings in a single solid color and carry emphasis with weight or size, not a clipped gradient

The detector looks for `background-clip: text` (or its `-webkit-` alias) paired with a gradient background and a transparent text color. The gradient is painted as the element's background and clipped to the glyphs, which means the text itself has no color: the selection highlight paints behind transparent letters and the words disappear while selected, and forced-colors mode strips the background image so the heading can vanish entirely. The hue carries no information — it never encodes state, importance, or grouping — so a solid color plus a heavier weight or a larger size says the same thing without breaking selection and high-contrast users.

## Bad — do not do this

`design-impeccable-gradient-text-bad`

```tsx
export function ImpeccableGradientTextBad() {
  return (
    <div className="space-y-3">
      <div className="rounded-lg border border-border bg-card p-4">
        <h2 className="bg-gradient-to-r from-fuchsia-500 via-violet-500 to-cyan-400 bg-clip-text text-2xl font-bold text-transparent">
          Ship faster with confidence
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">Try selecting the headline above.</p>

        <p className="mt-3 text-xs font-medium text-muted-foreground">Selected:</p>
        <h2 className="mt-1 inline-block bg-fuchsia-500/40 bg-clip-text text-2xl font-bold text-transparent">
          Ship faster with confidence
        </h2>
      </div>

      <p className="text-xs text-error">
        The gradient is painted as the background and clipped to the glyphs, so the text itself is
        transparent. Select it and the selection highlight paints behind nothing — the words vanish.
        Forced-colors mode drops the background too, leaving an invisible headline.
      </p>
    </div>
  );
}
```

## Good — do this

`design-impeccable-gradient-text-good`

```tsx
export function ImpeccableGradientTextGood() {
  return (
    <div className="space-y-3">
      <div className="rounded-lg border border-border bg-card p-4">
        <h2 className="text-2xl font-bold text-foreground">
          Ship <span className="font-extrabold text-primary">faster</span> with confidence
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">Try selecting the headline above.</p>

        <p className="mt-3 text-xs font-medium text-muted-foreground">Selected:</p>
        <h2 className="mt-1 inline-block bg-primary/25 text-2xl font-bold text-foreground">
          Ship <span className="font-extrabold text-primary">faster</span> with confidence
        </h2>
      </div>

      <p className="text-xs text-success">
        One solid color, with emphasis carried by weight and size. Selection highlights it, forced-colors
        mode maps it to a system color, and copy/paste still shows real text on any background.
      </p>
    </div>
  );
}
```

## References

- [impeccable.style](https://impeccable.style/)
- [MDN: background-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-clip)
- [MDN: forced-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/forced-color-adjust)