CSS Text GradientsWhat 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;
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.