DEV Community

Cover image for Fluid Animated CSS Gradient Text Effect

Fluid Animated CSS Gradient Text Effect

Gabe on February 12, 2019

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 ...
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...