# Gradient Text Selection

**MUST** · **ID:** `interactions-gradient-text-selection` · **Category:** interactions
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-gradient-text-selection

> MUST: For gradient text (`background-clip: text`), unset the gradient in `::selection` — otherwise the selection highlight renders it unreadable.

Gradient text should unset the gradient on ::selection state for readability

When users select gradient text, the gradient effect combined with the selection highlight makes the text unreadable. Override ::selection to use a solid color and unset -webkit-text-fill-color so selected text remains legible.

## Rule snippet

```tsx
.gradient-text::selection { -webkit-text-fill-color: #fff; background: var(--accent); }
```

## Bad — do not do this

`interactions-gradient-text-selection-bad`

```tsx
export function GradientTextSelectionBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h2
          className="text-2xl font-bold mb-2"
          style={{
            background: 'linear-gradient(135deg, hsl(var(--primary)), hsl(var(--destructive)))',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}
        >
          Select this gradient text
        </h2>
        <p className="text-sm text-muted-foreground">Try selecting the heading — the gradient persists on selection, making it hard to read.</p>
      </div>
      <p className="text-xs text-error">Gradient not unset on ::selection — unreadable when selected</p>
    </div>
  );
}
```

## Good — do this

`interactions-gradient-text-selection-good`

```tsx
export function GradientTextSelectionGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <style>{`
          .gradient-text-good::selection {
            -webkit-text-fill-color: var(--primary-foreground);
            background: hsl(var(--primary));
          }
        `}</style>
        <h2
          className="gradient-text-good text-2xl font-bold mb-2"
          style={{
            background: 'linear-gradient(135deg, hsl(var(--primary)), hsl(var(--destructive)))',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}
        >
          Select this gradient text
        </h2>
        <p className="text-sm text-muted-foreground">Try selecting the heading — gradient resets to solid on selection.</p>
      </div>
      <p className="text-xs text-success">Gradient unset on ::selection — readable when selected</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)