Text gradients with CSS
Posted 2 years ago
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.