CSS

CSS gradient text – background-clip: text explained

For website headings there is an elegant solution without hundreds of <span>s: a background gradient is clipped to the shape of the letters. Four lines of CSS – plus a few details so it looks clean in every browser.

Pick colors, open the CSS format and copy the ready code with an HTML example.

Generate CSS code

The code

.gradient-text {
  background: linear-gradient(90deg, #5a189a, #c9184a, #f77f00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

<h1 class="gradient-text">Welcome</h1>

Color Text Studio gives you exactly this code with your own colors: pick a palette, “As code” › CSS, copy.

What each line does

Line	Effect
`background: linear-gradient(…)`	Paints a gradient as the element’s background. `90deg` means left to right.
`-webkit-background-clip: text`	Clips the background to the letters. Prefixed for Safari and older browsers.
`background-clip: text`	The same in standard syntax.
`color: transparent`	Makes the actual text color see-through so the gradient shows.

Your own colors, ready CSS plus an HTML example – in seconds.

Generate CSS gradient

Details for a clean result

Gradient as wide as the text

An h1 is a block element as wide as its container. With short text you only see the start of the gradient. Fix: display: inline-block or width: fit-content.

Multi-line headings

On inline elements spanning several lines, the gradient runs across all lines. To show the full gradient on each line: -webkit-box-decoration-break: clone; box-decoration-break: clone;

A brighter middle

Gradients between opposite colors (e.g. blue → yellow) often turn gray in the middle. Current browsers can mix in a better color space: linear-gradient(90deg in oklab, …). That matches the “Vivid transitions” switch in the tool.

Fallback

Older browsers without background-clip: text would show a colored box with invisible text. This variant is safe:

.gradient-text { color: #c9184a; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background: linear-gradient(90deg, #5a189a, #c9184a, #f77f00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

Animated gradient

.gradient-text {
  background-size: 200% auto;
  animation: shift 4s linear infinite;
}
@keyframes shift { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; }
}

For a seamless loop, repeat the first color at the end of the gradient.

CSS or one span per letter?

	CSS gradient	One span per letter (HTML)
Websites	Ideal – short code, text stays in one piece	Works, but lots of code
Emails / newsletters	No – most email clients ignore `background-clip`	Yes – inline colors work everywhere
Word, Google Docs	No	Yes, via “Copy with colors”
Screen readers	Reads the text normally	Some read split-up text letter by letter
Modes	Gradient only	Also letters, words, lines, random

Rule of thumb: CSS on your own website, the HTML format or “Copy with colors” in emails and documents.

Common mistakes

text-shadow breaks the effect. The shadow sits on top of the transparent text. Use filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)) instead.
Forgetting the prefix. Without -webkit-background-clip, older Safari versions show just a colored box.
Text selection. Selected text can become invisible in some browsers. ::selection { color: #fff; background: #5a189a; } helps.
Too little contrast. Every color in the gradient must be readable on the page background. The tool’s contrast check verifies that.

Generate CSS gradient text now

Pick a palette, check the preview, copy CSS with an HTML example. Free, no sign-up.

Open Color Text Studio

FAQ

Does background-clip: text work in all browsers?

In all current browsers. For older Safari versions, include the -webkit- variant and add a fallback with @supports.

Can I use CSS gradients in emails?

No, most email clients don’t support background-clip. For emails, use the HTML format with individually colored letters.

How do I animate the gradient?

Set background-size to 200% and move background-position with @keyframes. Turn the animation off for users who prefer reduced motion.

Why does the gradient turn gray in the middle?

Because it is mixed in RGB. With “in oklab” in linear-gradient, current browsers mix more vividly.

Is the generator free?

Yes, no sign-up. Everything runs in your browser.

Sources

background-clip, MDN Web Docs.
background-clip: text, Can I use.
Understanding Success Criterion 1.4.3: Contrast (Minimum), W3C.
A perceptual color space for image processing (Oklab), Björn Ottosson.