CSS Gradient Generator

CSS Text Gradients

What is a Text Gradient?

Probably less known than the linear gradient and the radial gradient, is the text gradient.
It's the same background idea as the linear gradient, only that in this case you apply the gradient to a text instead of filling a background.
You'll love it. Just try to hover over the website logo on the left and you'll see for yourself.


Syntax

background: <linear-gradient>;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

Example

background: linear-gradient(to bottom right, #A22FCE, #FF7000);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

Result



More examples

background: linear-gradient(to bottom, #667EEA, #764BA2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

background: linear-gradient(90deg, #FF512F, #DD2476, #F09819);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

Common uses

• Hero headings and page titles
• Logos and wordmarks
• Call-to-action button text
• Highlighting a key phrase or brand name

Browser compatibility

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Opera Mini	Android Browser	Chrome Android
x	15+	49+	120+	15.5+	106+	15.5+	x	151+	151+

You can read more information about browser compatibility here. For maximum cross-browser compatibility and coverage, it's important that you use CSS prefixes. You can use this tool to append CSS prefixes to your CSS code.


FAQ

Why isn't my text gradient showing in some browsers?

You need both the prefixed and unprefixed properties: -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;. Older Safari and some Chromium versions only respect the "-webkit-" versions.

Can I use a radial or conic gradient for text too?

Yes — any gradient value works with background-clip: text, not just linear.

Try the CSS Gradient Generator →