DEV Community

Brandon Weaver
Brandon Weaver

Posted on

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.

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay