Linear-gradient Text and Animated Linear-gradient

The key to linear-gradient text is to set the background-clip property to text; this allows you to then apply a transparent color to the text and reveal the linear-gradient background image beneath.

To Animate a linear-gradient background, you simply need to set the background size of the image to be larger than the element, and change the background position within the animation.

You can also apply both of these solutions to get animated linear-gradient text.