Create animated linear gradient text with CSS

In this short & easy tutorial I'll share how to built animated text effect with simple CSS.

Strong typography has been popular website trend in 2020s and in this tutorial I'll show you a simple trick how to make your typography to stand out from the crowd with three simple steps.

1) Select colors

Gradient animation looks best at least 3 different colors where middle color is between two other colors. If you have strong contrast between colors you can use even more colors to smoothen the transition. Set the linear-gradient of the text using background-image: linear-gradient(...).

2) Set gradient to text

The magic trick to set gradient to the text instead of the background is to use background-clip: text and color: transparent CSS properties. To make sure your design works also on webkit browsers such as Chrome and Safari, remember to add also -webkit-background-clip: text property. You can adjust the position of the gradient by using background-size and background-position properties.

3) Add animation

To add animation use @keyframes in background-position and make sure the position value now differs from the original value you set in the previous step. Experiment with different positions and speeds to find the right fit for your text. Remember to add also the animation to text's animation property. If you want to create slightly different rhythm to the animation, try alternate-reverse property.

See full example in the Codepen and experiment with the SCSS variables to customize the result.

Open and remix code in Codepen.