loading...
Cover image for Fluid Animated CSS Gradient Text Effect

Fluid Animated CSS Gradient Text Effect

gabe profile image Gabe ・2 min read

CSS animations are awesome. Not only do they make great digital art pieces, they also give us the ability to add fluid design elements, right into our web pages. Recently, I integrated a CSS gradient animation in many of my blog links to give them a living, liquid feel to them. See my 'Recent Essays' module below


note: gif is sped up for demonstration purposes

Neat, right? And fairly simple to accomplish. All we really need is CSS!

Let's deconstruct it

So first thing in my CSS is the animation rules.

Here, I'm saying - play the animation named flow for a duration of 30 seconds. Set the animation to ease in and out for a smoother effect, and have the animation loop for an infinite number of times.

Then there are the background rules.

I set my background to be a linear-gradient and give it my desired colors. For beautiful gradients I use often UI Gradients when I can't come up with anything nice. I then stretch out the background to 300% the size using the background-size property to give the animation room to move.

I then set the background-clip to be text and set the text-fill-color to be transparent so my default font color doesn't interfere with my gradient.

Now on to the actual animating. I create a keyframe animation named flow and set up keyframes at the zero, fifty, and one-hundred percent marks.

Final result:

And there you have it - a nice, fluid animated gradient over text. Just another little fun design element courtesy of CSS.

Discussion

pic
Editor guide
Collapse
watthem profile image
watthem ❄️️

If I remember correctly the background position is going to trigger a repaint. I found this cost to be rather innocent on a user transition, but I've had issues with animations across devices in terms of CPU performance. I'd be interested to know how this profiles and if there's anything that could be done to get the same animation effects without such a dramatic impact. Looks awesome though!!

Collapse
gabe profile image
Gabe Author

Yeah - I have noticed that if I spam a page with links using this effect, my laptop fans start spinning like a jet engine. Been trying to figure out ways to handle this. Glad you enjoyed the post!

Collapse
turnerj profile image
James Turner

I did this exact same thing a few weeks ago on two sites I built for hover effects on certain links and elements - I really like the effect you can achieve with it. For the most part, it works pretty good with icon fonts too (though Safari was a bit hit-and-miss).

Collapse
gabe profile image
Gabe Author

Yeah I noticed in Safari for iOS, if text wraps to a second line, the background does not clip to it - my poorly done work around was to hide my overflown text

Collapse
turnerj profile image
James Turner

Ahhhh my issue was with icon fonts specifically that the gradient never applied as I'm using gradients on icons heavily on my portfolio website.

What you might want to look at is -webkit-box-decoration-break: clone; regarding the text wrapping onto a second line. 🙂

Thread Thread
gabe profile image
Gabe Author

Ahhh - this is awesome! I’m going to give it a shot later on today - thank you James!

Collapse
shecodes profile image
Nikia Shaw

I can't wait to try this out - thanks!

Collapse
gabe profile image
Gabe Author

It's a really neat effect, I'm more than happy to share!

Collapse
leolima32 profile image
Leonardo Ferreira

Simply amazing, thanks for sharing! This is kind out of scope of the article but what font did you choose to make the example?

Collapse
gabe profile image
Gabe Author

Glad you liked it! And the font family I set for the text in the example is “HelveticaNeue-Light” - its clean and easy to read

Collapse
olimpioadolfo profile image
Olimpio

Amazing and eye-catching effect...