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.


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


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


Text Gradient

Browser compatibility

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.

CSS Text Gradients Generator

You can easily generate CSS gradients to be used in your own Text gradients with the online css gradient generator.