# Tailwind gradient text: classes, v4 syntax and fixes
[Canonical HTML page](https://gradiently.design/guide/tailwind-gradient-text)
Four utilities turn a heading into gradient text. The details around them decide whether it looks crisp or clipped. Here are the classes for Tailwind v4 and v3, and the problems you will hit.
## The short version
- Tailwind gradient text needs a gradient background, `bg-clip-text` to clip it to the letters, and `text-transparent` so the background shows through.
- In Tailwind v4 the gradient utility is `bg-linear-to-r`, while v3 uses `bg-gradient-to-r`; the from, via and to colour classes work the same in both.
- Tailwind v4 lets you choose the interpolation space with a modifier such as `bg-linear-to-r/oklch`, which keeps the midpoint of a gradient bright.
- Add `box-decoration-clone` when a gradient heading wraps onto several lines, and a little bottom padding when descenders get cut off.
- Check the contrast of the lightest colour in the gradient against the page, because that is where gradient text becomes hard to read.
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.
```html
Ship the quiet version
```
The whole effect in one class list. Order inside the class attribute does not matter.
## 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](https://gradiently.design/guide/css-gradient-text): `background-clip: text` with a transparent fill.
| Utility | What it sets | If you forget it |
| --- | --- | --- |
| `bg-linear-to-r` | A linear gradient towards the right | No gradient at all |
| `from-*` `via-*` `to-*` | The colour stops | Transparent or default stops |
| `bg-clip-text` | `background-clip: text` | A coloured box behind solid text |
| `text-transparent` | `color: transparent` | Solid text covers the gradient |
The four parts of Tailwind gradient text and the symptom each one leaves when it is missing.
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](https://gradiently.design/guide/tailwind-gradient) 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.
| What you want | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| Left to right | `bg-linear-to-r` | `bg-gradient-to-r` |
| Diagonal | `bg-linear-to-br` or `bg-linear-45` | `bg-gradient-to-br` |
| Radial | `bg-radial` | Arbitrary value only |
| Conic | `bg-conic` | Arbitrary value only |
| OKLCH blending | `bg-linear-to-r/oklch` | Not available |
| Clip to text | `bg-clip-text` | `bg-clip-text` |
Side by side, so you can tell which version a snippet you found online was written for.
## 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](https://gradiently.design/guide/tailwind-colors).
- violet-600 / pink-600: `linear-gradient(90deg, #7c3aed 0%, #db2777 100%)`
- cyan-600 / blue-600 / violet-600: `linear-gradient(90deg, #0891b2 0%, #2563eb 50%, #7c3aed 100%)`
- orange-600 / rose-600: `linear-gradient(90deg, #ea580c 0%, #e11d48 100%)`
- emerald-600 / teal-600 / cyan-600: `linear-gradient(90deg, #059669 0%, #0d9488 50%, #0891b2 100%)`
- amber-500 / orange-500 / pink-600: `linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #db2777 100%)`
- slate-800 / slate-500: `linear-gradient(90deg, #1e293b 0%, #64748b 100%)`
Each label lists the stops in order: the first goes in `from-*`, a middle one in `via-*`, the last in `to-*`. The 600 shades keep enough contrast on a white page; on a dark page, swap to 300 or 400. The hex values are the v3 palette; v4's OKLCH versions look very close.
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.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Stop positions, an interpolation modifier and a fully custom gradient. Arbitrary values work in v3 and v4.
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](https://gradiently.design/guide/css-gradient-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](https://gradiently.design/guide/dark-mode-gradients).
### Avoid
- Gradient text on long paragraphs
- A pale stop that vanishes on white
- Complementary colours with a grey middle
- Gradient text on top of a gradient background
- Leaving out a solid colour for selected text
### Do
- Keep it for a headline or a single word
- Check the lightest stop against the page
- Neighbouring hues, or OKLCH interpolation
- Solid ground behind gradient words
- Set `selection:text-white selection:bg-violet-600`
## 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.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Then add `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` to the heading, and repeat the first colour as the last stop so the loop has no jump.
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](https://gradiently.design/guide/css-animated-gradient).
## Keep gradient text readable
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. **Test it like body copy** Large bold headings need at least 3:1 against the page under WCAG. [Colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility) has the full rules.
3. **Use weight** Gradients read better in bold and heavy weights, where there is more fill to show the colour.
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.
## FAQ
### How do I make gradient text in Tailwind?
Add a gradient with `bg-linear-to-r` (or `bg-gradient-to-r` in v3), colour stops with `from-*` and `to-*`, then `bg-clip-text` and `text-transparent`.
### Why is my Tailwind gradient text not showing?
Usually `text-transparent` is missing, so solid text covers the gradient, or `bg-clip-text` is missing, so the gradient fills a box behind the words. Check that all four parts are on the same element.
### What replaced bg-gradient-to-r in Tailwind v4?
The linear utility is now `bg-linear-to-r`. The old name still works for compatibility, and v4 adds `bg-radial`, `bg-conic` and angle utilities such as `bg-linear-45`.
### How do I stop gradient text cutting off letters like g and y?
Add a little bottom padding such as `pb-1`, or loosen the line height, because the clipped background ends at the line box.
### Is gradient text accessible?
It can be, if every part of the gradient meets contrast requirements against the page. Test the lightest stop and keep gradient text to headings.