Gradient text

I remember a time when gradients were tricky to use for backgrounds, let alone for styling text. But, with modern CSS, it's pretty easy to create gradient text with only a few lines of code, at least on WebKit browsers (Chrome, Edge, Safari).
Styling text with gradients starts the same as creating a gradient for the background. You use the linear-gradient() function to define the gradient colors and direction.
Then, you have to apply it to the text using the -webkit-text-fill-color property with a value of transparent. Finally, clip the background with the text using the background-clip property with a value of text and you're done!
https://codepen.io/chalarangelo/pen/gOVrreP

.gradient-text {
  background: linear-gradient(to right, #009FFF, #ec2F4B);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

Then, you have to apply it to the text using the -webkit-text-fill-color property with a value of transparent. Finally, clip the background with the text using the background-clip property with a value of text and you're done!
https://codepen.io/chalarangelo/pen/gOVrreP

From 30-seconds-of-code: gradient-text