Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

interactionsRauno

Gradient Text Selection

MUST

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

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

Bad

Good

Why it matters

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.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.