Speedy CSS Tip: Animated Gradient Text
Here's a fast way to add an animated gradient text effect using scoped custom properties and background-clip, a technique well-suited for frontend projects that need quick visual flair.
Start by opening a new pen on CodePen and create a simple header element with the text "Speedy". Give the page's body a darker background-color to make the effect pop. Increase the header's font-size using clamp() so the text scales responsively.
Define two custom properties for the gradient's colors. Apply a linear-gradient to the background property using those colors and rotate the gradient by 90 degrees. Add another custom property you can reuse for the horizontal size of the background, applying it to background-size-x. Then, set the text's color to transparent and use background-clip: text so the patterned background is visible only through the letterforms.
To animate the effect, define a @keyframes rule that shifts the --bg-size custom property, showcasing how scoped custom variables keep such animations easier to maintain. Attach this animation to the element with the shorthand animation property.
For extra polish, wrap the animation declarations in a media query that respects users' prefers-reduced-motion preferences, avoiding the movement for those who don't want it.
That's it — with just a few lines of CSS, you've implemented a moving gradient text effect. For a visual walkthrough, the original tip comes with a video and a related tweet link, though both are optional to refer back to. Done and done.
