CSS text gradient generator.

What the CSS output does

The CSS tab returns four lines. background-image holds the gradient. background-clip: text limits the painted background to the letter shapes, and the -webkit-background-clip line repeats it for browsers that only understood the prefixed form. color: transparent removes the normal text fill so the clipped background is visible.

The unprefixed background-clip: text works in Chrome and Edge 120 and later, Safari 14 and later, and Firefox 49 and later. Older Chromium versions supported the text value only through the prefixed property, so keeping both lines costs nothing. Tailwind v4's bg-clip-text utility outputs both declarations for you.

.headline {
  background-image: linear-gradient(to top left, #1d293d, #8e51ff, #9f9fa9);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Controls and output

Direction offers the same linear, conic and radial options as the background gradient generator. Start, Middle and End colors come from the Tailwind palette, and the Middle color switch removes the middle stop. In the CSS output the colors have no explicit positions, so they are spaced evenly. Shuffle, or the G key outside a text field, picks a random direction and colors.

Type into Preview text to see the gradient on your actual headline, up to 80 characters. This matters more than it seems: a gradient that looks good on a two-word sample can look washed out on a long line, because each letter only shows a narrow slice of the colors.

The Tailwind tab returns the direction, the color stops and bg-clip-text text-transparent. Colors here are Tailwind tokens only. For a custom brand color, build the gradient in the background gradient generator, which accepts any HEX, RGB or HSL value, then add background-clip: text and color: transparent yourself.

<h1 class="w-fit bg-linear-to-tl from-slate-800 via-violet-500 to-zinc-400 bg-clip-text pb-1 text-5xl font-bold text-transparent">
  Quarterly report
</h1>

Fitting the gradient to the words

The gradient covers the element's box, not the text. A block-level h1 is as wide as its container, so a left-to-right gradient on a short heading spreads over the full width and the letters only show its first part. Make the element as wide as its text with w-fit in Tailwind or display: inline-block or width: fit-content in CSS, and the whole gradient lands on the words.

background-clip: text only paints inside the element's background area. With very tight line-height, descenders on letters such as g, y and p can extend below that area and lose their color. A little bottom padding (pb-1 in the example above) or a slightly looser line-height fixes it.

If the gradient sits on an inline span that wraps onto two lines, the browser treats it as one long strip and each line shows a different slice. Add box-decoration-break: clone (box-decoration-clone in Tailwind, which also writes the -webkit- prefix) to repeat the full gradient on each line.

Radial and conic directions in Tailwind v4

For radial and conic text gradients in Tailwind v4, use bg-radial-[at_top] or bg-conic-[at_center] together with from-, via- and to- colors. An arbitrary class in the older v3 form, bg-[radial-gradient(…,_var(--tw-gradient-stops))], computes to no background in v4. Combined with text-transparent, that makes the text invisible. This tool copies the v4 form; rewrite older snippets the same way, or use the CSS tab, which writes the radial-gradient() or conic-gradient() values directly.

Readability and fallbacks

Gradient text is still real text: screen readers announce it, and it can be selected, translated and indexed. In forced colors modes such as Windows High Contrast, browsers drop gradient backgrounds and apply a system text color, so the heading falls back to plain readable text. The risk is visual contrast. WCAG measures text against what is behind it, and with gradient text every stop is a different text color. Check the stop with the least contrast against your page background; on a dark page, a dark stop like slate-800 (the tool's default start color) can fall well below 3:1 for large text.

Keep gradient text for large, heavy headings. Thin or small text shows little of the gradient and is harder to read, and body copy in a gradient is tiring to scan. If you want a safety net for any environment where the clip is unavailable, set a solid color first and switch to transparent only inside a feature query.

.headline {
  color: #8e51ff; /* solid fallback */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .headline {
    background-image: linear-gradient(to right, #8e51ff, #f6339a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

Questions

How do I make gradient text in Tailwind CSS v4?

Put a gradient and the clip utilities on the text element: bg-linear-to-r from-violet-500 to-pink-500 bg-clip-text text-transparent. Add w-fit if the element is a block, so the gradient spans the words rather than the whole container.

Why is my gradient text invisible?

text-transparent removes the text fill, so the letters only appear if the background gradient is valid. Common causes are a missing or misspelled gradient class, a v3-style arbitrary radial or conic class in a Tailwind v4 project, or a background shorthand later in the cascade that replaces the gradient.

Do I still need -webkit-background-clip: text?

Current Chrome, Edge, Firefox and Safari support the unprefixed property, but Chromium before version 120 and Safari before version 14 only supported the text value with the -webkit- prefix. Keeping both lines is harmless, and the tool's CSS output already includes them.

Can I animate gradient text?

Yes. Set background-size to 200% 100% and animate background-position with @keyframes. Keep the motion slow, and stop it inside a prefers-reduced-motion: reduce media query, since moving color behind text can be distracting.