How to Make Gradient Text in CSS with background-clip

Most "gradient" tutorials show you how to put a gradient behind something — a hero section, a button, a card. Gradient text is a different trick. Instead of sitting behind your content, the gradient flows through the letterforms themselves, so each glyph is painted from the same color ramp. Done well it reads as premium without costing a single image byte. Done wrong, your headline vanishes into thin air.

This guide walks through the technique, the prefix you can't skip, where browser support actually stands, and the one line that separates a clean effect from an invisible blank.

The three-line trick that fills text with a gradient

The core idea is small but counterintuitive. You don't color the text directly. You paint a linear-gradient (or radial/conic) onto the element's background, clip that background to the shape of the text, then make the real glyph fill transparent so the clipped gradient shows through.

That's three moving parts:

1. background-image: linear-gradient(...) — the color ramp lives on the background.
2. background-clip: text (with its -webkit- twin) — the background is masked to the outline of the characters.
3. -webkit-text-fill-color: transparent — the opaque letter fill is removed so the gradient underneath is what you see.

Here's the concrete point worth tattooing on your wrist: a linear-gradient background clipped to the text with a transparent fill makes the letters show the gradient — and you must always set a solid fallback color first, before the transparent override, so any engine that ignores background-clip still renders readable text instead of a blank.

If you only remember one sentence from this article, that's the one.

A worked example: a gradient headline you can paste

Here is the full CSS for a gradient h1, in the exact order that keeps it safe across browsers:

.gradient-headline {
  /* 1. Solid fallback FIRST — readable text if clip isn't supported */
  color: #6d28d9;

  /* 2. The gradient lives on the background */
  background-image: linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #f59e0b 100%);

  /* 3. Clip the background to the text shape (prefixed line first) */
  -webkit-background-clip: text;
  background-clip: text;

  /* 4. Make the real glyph fill transparent so the gradient shows */
  -webkit-text-fill-color: transparent;

  /* sensible headline sizing */
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
}

<h1 class="gradient-headline">Ship faster</h1>

Walk the cascade top to bottom and the safety logic is obvious. A browser that supports the effect reaches line 4, paints the letters transparent, and the clipped gradient comes through. A browser that doesn't understand background-clip: text simply ignores lines 2–4 and falls back to the solid #6d28d9 from line 1 — your headline is purple, but it is there and readable. Flip the order so transparent lands before any solid color, and that same unsupported browser shows you nothing at all.

Why you still need the -webkit- prefix

background-clip: text was a WebKit experiment for years before the spec caught up, and the unprefixed form still isn't reliable everywhere. Ship only background-clip: text and you break the effect in Safari and older Chromium builds. Ship only -webkit-background-clip: text and you risk breaking on a future standards-only engine.

So you write both, prefixed line first, standard line second. This isn't a relic — it's exactly what the popular frameworks do under the hood. Tailwind's bg-clip-text utility and Bootstrap's text utilities both emit the prefixed-then-standard pair. If a tool hands you only one line, it's giving you a bug, not a feature.

The same logic applies to the fill. -webkit-text-fill-color overrides the glyph fill and wins over color when both are set, so it's what does the real "make the letters transparent" work in WebKit/Blink. Adding color: transparent afterward is a reasonable standards-side belt-and-suspenders — but only after your solid fallback color, never instead of it.

Browser support and the fallback you must keep

The good news: gradient text works in every current evergreen browser — Chrome, Edge, Safari, Firefox, and their mobile versions — as long as you ship the prefixed line. The cases you're protecting against aren't exotic; they're stale corporate browsers, in-app webviews with odd rendering quirks, and the rare engine that chokes on a malformed gradient value.

In all of those cases the failure mode is the same and it's nasty: because you deliberately made the fill transparent, a non-rendering gradient leaves you with transparent text on the page and nothing to show. The fix is the solid fallback color, declared before the transparent override. Treat that fallback as a hard requirement, not a nicety. It's also your accessibility floor — keep it dark enough (or light enough, against a dark background) to pass contrast on its own, because a screen reader still reads the real text and Google still indexes it. The gradient is purely visual; it never touches the DOM content.

One more accessibility note from the trenches: never bake a gradient headline into a flat image to "guarantee" the look. You'd throw away the SEO and the selectable, screen-reader-friendly text you get for free with the CSS approach. Build it from our CSS Text Gradient Generator instead — it emits the fallback-first, prefixed-then-standard ordering automatically, with a live preview so you can spot a too-light stop before it ships.

When a gradient headline actually helps

I'll be honest about where I reach for this and where I don't. The first time I dropped a two-stop gradient onto a landing-page h1, the page went from "competent" to "designed" in about thirty seconds, with zero added load — no hero image to optimize, no LCP regression, just three extra lines of CSS. That's the sweet spot: one big focal element where the gradient earns its keep.

Concretely, gradient text pulls its weight on:

• Hero headlines — one bold line above the fold, sized large, where you want premium polish without a background image.
• Logo wordmarks — a brand name as gradient text scales perfectly and recolors with a one-line edit, unlike an SVG-in-an-img.
• Pricing numbers — wrap just the figure ($29) in a <span> so it becomes the focal point while /month stays flat for contrast.

Where it backfires is body copy and long runs of text. A paragraph in a gradient is harder to read and the effect loses all impact through repetition. Restraint is the whole game: one or two gradient elements per screen, each chosen on purpose.

When you're picking the colors themselves, design the ramp the same way you'd build any palette — start from a base hue, then generate harmonious stops. A two- or three-stop gradient with controlled hue distance almost always beats a random rainbow. If you want to explore tints and shades of a single brand color before committing them as gradient stops, our color shades generator is a quick way to find ramp values that sit nicely together.

Wrapping up

Gradient text comes down to one technique and one rule. The technique: gradient on the background, clipped to the text, with a transparent fill. The rule: a solid fallback color always comes first, so the effect degrades to readable text instead of an invisible headline. Get the cascade order right, ship the -webkit- prefix alongside the standard line, keep the lightest stop legible, and reserve the effect for the one or two elements that deserve the spotlight. Do that and you get a headline that looks expensive, stays accessible, indexes cleanly, and adds nothing to your page weight.

---

Made by Toolora · Updated 2026-06-13