Text gradients with CSS

Posted last year
Return to overview

If you want to add some extra flair to text, you can apply a background gradient like so:

.text-gradient { background: linear-gradient( 45deg, rgb(16, 185, 129), rgb(91, 31, 182) ); background-clip: text; text-fill-color: transparent; }

That's it! When using these type of features, always make sure to check the support across browsers and make sure that you have fallback measures in place. Caniuse.com is arguably the best resource when looking up the support. Also, make you that you prefix properties, when required, with their engine specific prefix.

Return to overview