Gradient Text Headline

Preview

Code

<!--
  bg-clip-text does not change what the text *is*: it stays real, selectable,
  announced text - only the paint changes. The two things that do change are
  contrast (judge the darkest and lightest stop against the page, never the
  average) and clipping: the gradient is clipped at the content box, so a
  tight line-height puts descenders outside it. The bottom padding on the
  title is not rhythm - it is where the descenders live.
-->
<div class="gradient-text">
  <p class="gradient-text__kicker">The 2026 report</p>
  <h2 class="gradient-text__title">Design is how it works</h2>
  <p class="gradient-text__copy">
    One gradient across the headline, solid ink everywhere else - the copy has
    to carry the reading, so it stays flat.
  </p>
</div>

Props

Variants

Customization

`bg-clip-text` changes the paint, not the text: it stays selectable, findable and announced, so there is nothing to do for screen readers. Two things do need care. Contrast: judge each stop against the page on its own - the darkest and the lightest stop decide legibility, never the average - which is why the `dark:` stops are each one shade lighter (`blue-600` is muddy on near-black, `blue-400` is not). Clipping: the gradient clips at the content box, and a tight line-height puts the descenders of g, y and j outside it - the `pb-1` on the headline is descender room, not rhythm; remove it and the tails get sliced. The CSS tab also sets a solid `color` before the clip properties as a fallback, so browsers without `background-clip: text` show violet text instead of invisible text. Keep the gradient to the headline; body copy has to carry the reading and stays flat.

Details

Author

ADYSRE

Version

1.0.0

Created

2026-07-17

Updated

2026-07-17

Related components