DEV Community

Cover image for Fluid Animated CSS Gradient Text Effect
Gabe
Gabe

Posted on

Fluid Animated CSS Gradient Text Effect

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.

Top comments (11)

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 • Edited

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

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 • Edited

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

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

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

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
 
rnrnshn profile image
Olimpio

Amazing and eye-catching effect...