<h1 class="gt">Pure CSS</h1>About this animation
Headline text filled with a slowly shifting gradient, using background-clip: text and a looping background position.
How it works
A multi-colour linear-gradient is set as the background of the heading and sized at 300 percent width. background-clip: text clips the gradient to the letter shapes, and the text colour is made transparent so the gradient shows through. A keyframe moves background-position so the colours drift slowly across the word.
Ways to customise it
- Replace the gradient stops with your brand colours.
- Change the animation duration to speed up or slow down the drift.
- Adjust the clamp() font size to resize the text.
Good to know
Keep strong contrast between the brightest and darkest stops and the background. The animation stops under prefers-reduced-motion. Include the -webkit- prefixed clip properties for older Safari.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.