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>
            background-clip: text
            text-fill-color: transparent

Example

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

Result



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.