CSS Text Gradient Generator

Create gradient text with live preview. Copy the CSS or Tailwind snippet — no extra tools needed.

Colors: #7c3aed → #ec4899Font Size: 48pxWeight: 700CSS Length: 261 chars

Presets

From color

To color

Direction

Font size (px)

Font weight

Preview text

Gradient Text

CSS

.gradient-text {
  background: linear-gradient(to right, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 48px;
  font-weight: 700;
  display: inline-block;
}

Tailwind snippet

<span class="bg-clip-text text-transparent" style="background-image: linear-gradient(to right, #7c3aed, #ec4899)">
  Gradient Text
</span>

CSS text gradient generator

CSS gradient text works by painting a linear-gradient as the background of the element, then clipping it to the text shape with -webkit-background-clip: text and -webkit-text-fill-color: transparent. The display: inline-block ensures the background area matches the text bounds. You can achieve the same in Tailwind with the bg-clip-text and text-transparent utilities.

Built and maintained by Meet Shah · Last updated 28 July 2026

What this tool is used for

Producing gradient text with a copy-ready CSS or Tailwind snippet.
Getting the clip and fill declarations right in one pass.
Comparing gradient directions on the same heading.
Producing an effect for a marketing hero.
Building gradient text that uses theme colours.

Frequently Asked Questions

How is a gradient applied to text?: A gradient is set as the element's background, `background-clip: text` restricts it to the glyph shapes, and `color: transparent` lets it show through. The text stays real text — selectable, searchable and readable by assistive technology.
Why does my text vanish completely?: Because `color: transparent` applied without the clip taking effect leaves nothing to see. If `background-clip: text` is unsupported, misspelled, or the background never painted, the transparent colour is the only thing left. Declare a fallback `color` before it.
Do I still need the -webkit- prefix?: Yes, for the widest support — `-webkit-background-clip: text` alongside the standard property. It is one of the longest-lived prefixes still doing real work, because the feature shipped in WebKit years before it was standardised.
Why does the gradient run across the whole line?: Because the background is sized to the element, not to the glyphs. A block-level heading stretches the gradient across the full line width, so short text sees only a slice of it. `display: inline-block` or `width: fit-content` makes the gradient span the words.
Is it accessible?: The text is real, so screen readers are fine. Contrast is the risk: the ratio varies along the gradient, and the lightest point is the one that has to pass. Measuring only the midpoint is how gradient headings fail an accessibility audit.

Common errors and gotchas

Omitting a fallback colour, which leaves the text invisible where the clip is unsupported.
Copying the Tailwind snippet without the arbitrary-value syntax the gradient stops need.
Using it for body copy, where it hurts legibility.
Forgetting the prefixed properties some browsers still require.
Assuming the gradient scales with font size, when it is sized to the element box.