Tailwind gradient text: classes, v4 syntax and fixes

To make Tailwind gradient text, put a gradient on the element and clip it to the letters: bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent. The first part paints a gradient background, bg-clip-text trims that background to the shape of the glyphs, and text-transparent removes the solid text colour so the gradient shows through. In Tailwind v3, write bg-gradient-to-r instead of bg-linear-to-r; the rest is identical.

<h1 class="bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-5xl font-bold text-transparent">
  Ship the quiet version
</h1>

How the classes work together

It helps to know what each utility compiles to, because every bug with gradient text comes from one of the four parts going missing. Under the hood this is the same technique as plain CSS gradient text: background-clip: text with a transparent fill.

Directions follow the usual suffixes: -to-r, -to-br, -to-b and so on. Version 4 also accepts an angle, such as bg-linear-45 or bg-linear-135, and adds bg-radial and bg-conic, which work for text too. If you have not used the gradient utilities much, Tailwind gradients covers backgrounds in depth.

Tailwind v4 and v3 class names

The biggest change in v4 is the name of the linear utility. bg-gradient-to-r became bg-linear-to-r, to sit alongside the new radial and conic utilities. The old name still compiles in v4 for compatibility, but new code should use the new one.

Gradient text examples you can copy

Three or four colours that sit near each other on the wheel make the cleanest gradient text. Opposites look loud and can turn grey in the middle. These combinations use colours from the default palette, described in Tailwind colours.

Stop positions move where each colour sits. from-20% via-50% to-80% keeps solid colour at both ends of a long headline, which looks calmer than a blend that starts on the first letter.

<!-- Stop positions -->
<h2 class="bg-linear-to-r from-cyan-600 from-20% via-blue-600 via-50% to-violet-600 to-80% bg-clip-text text-transparent">
  Plans for every team
</h2>

<!-- OKLCH interpolation keeps the middle bright -->
<h2 class="bg-linear-to-r/oklch from-blue-600 to-yellow-400 bg-clip-text text-transparent">
  Brighter in the middle
</h2>

<!-- Arbitrary gradient, underscores stand in for spaces -->
<h2 class="bg-[linear-gradient(100deg,#1e1b4b_0%,#7c3aed_60%,#f472b6_100%)] bg-clip-text text-transparent">
  Exactly your colours
</h2>

Blue to yellow is a good test of interpolation. Blended in sRGB it passes through a greyish green; blended in OKLCH it stays vivid. CSS gradients in OKLCH explains why.

Fixing common gradient text problems

Multi-line headings

By default the gradient spans the whole element box, so a heading that wraps gets one stretched gradient with the second line in a different colour from the first. Add box-decoration-clone to give each line its own full gradient, or inline-block to shrink the box to the text.

Clipped descenders

Tight leading such as leading-none can slice the bottom off a g or y, because the background ends at the line box. Add pb-1 or loosen the leading slightly.

Dark mode

A gradient tuned for white paper looks muddy on a dark page. Give it its own shades with variants: from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300. The same thinking applies to backgrounds, covered in dark mode gradients.

Animating Tailwind gradient text

A slow shimmer comes from a background twice as wide as the text that slides sideways. In v4, define the animation inside @theme and it becomes an animate-* utility.

@import "tailwindcss";

@theme {
  --animate-shine: shine 6s linear infinite;

  @keyframes shine {
    to { background-position: 200% center; }
  }
}

Use it once on a page at most. Motion pulls the eye, which is the point for a launch headline and a nuisance everywhere else. The pattern is the same one used in animated CSS gradients.

Keep gradient text readable

1. 1

   Find the weakest stop

   The lightest colour on a light page, or the darkest on a dark page, sets the contrast you actually get.

2. 2

   Test it like body copy

   Large bold headings need at least 3:1 against the page under WCAG. Colour contrast and accessibility has the full rules.

3. 3

   Use weight

   Gradients read better in bold and heavy weights, where there is more fill to show the colour.

4. 4

   Stop at a few words

   One headline or one emphasised word. Anything longer starts to look like a rendering error.

Gradient text is a web technique. When the job is a social post or a banner and you want the gradient behind the words instead, Gradiently Marks move their calmest area behind the text and pick light or dark ink per line, so the words read without you testing every stop.