# `react-doctor/no-gradient-text`

Use solid text colors for readability. If you need emphasis, use font weight, size, or a distinct color instead of gradients

- **Category:** Architecture
- **Severity:** warn
- **Source:** oxlint-plugin-react-doctor
- **Framework:** global
- **Enabled when:** always

## Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm the element either sets backgroundClip (or WebkitBackgroundClip) to 'text' AND has background or backgroundImage containing a gradient() function, or uses both bg-clip-text and bg-gradient-to-* Tailwind utilities together. Loading-skeleton shimmer elements that contain no readable text are an acceptable exception.

## Fix prompt

Use this once validation confirms the diagnostic is real.

Replace with a solid color value. For emphasis, prefer increased font-weight, larger size, or a brand accent color over a gradient fill. Reserve gradient text for at most one display headline per page; never apply it to body copy, links, or anything users need to read carefully. See https://web.dev/learn/design/typography