UsefulTab

How to create gradient text in CSS

Gradient text — a color blend flowing across the letters — is a popular heading effect, and it's pure CSS. This guide shows the technique, the exact cross-browser code, and how to generate it without writing any CSS by hand.

The fastest way

Type your text into the Gradient Text Generator, pick two colors and a direction, and copy the generated CSS. Read on for how it works.

How it works

The trick is to paint a gradient as the element's background, clip that background to the shape of the text, and make the text itself transparent so the gradient shows through the letters: 

.gradient-text {
  background: linear-gradient(90deg, #6a5cff, #ff5ca8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

The two lines people forget

If your text renders as a solid block instead of gradient letters, you're almost always missing one of two things: color: transparent (without it, opaque letters hide the gradient) or the -webkit-background-clip: text prefix that Chrome and Safari still require. Always include both.

Choosing colors that work

Two colors that are close in hue give a subtle sheen; far-apart hues give a bold rainbow effect. To pick a harmonious pair, generate a set with the Palette Generator, and to convert a color between HEX, RGB, and HSL use the Color Converter.

Keep it accessible

The text stays real and selectable, so screen readers are fine — but keep enough contrast between the gradient and the background, and don't let color be the only thing carrying meaning.

A note on privacy

The Gradient Text Generator builds the preview and CSS in your browser, so your text is never uploaded to a server.

Open the Gradient Text Generator →

Common questions

How do you make gradient text in CSS?

Set a linear-gradient as the element's background, then clip that background to the text shape with background-clip: text (plus the -webkit- prefix) and make the text itself transparent with color: transparent. The gradient then shows only through the letters.

Why is my gradient text showing as a solid block instead of letters?

You're missing color: transparent, or the -webkit-background-clip: text prefix that Chrome and Safari require. Without transparent text, the gradient sits behind opaque letters; without the clip, the background fills the whole box.

Does gradient text work in all browsers?

Yes, in all current browsers — Chrome, Edge, and Safari need the -webkit-background-clip: text prefix, which you should always include alongside the standard background-clip: text.

Is gradient text accessible?

The text stays real, selectable, and readable by screen readers. Keep sufficient contrast between the gradient colors and the background, and never rely on color alone to carry meaning.