Fluid Animated CSS Gradient Text Effect

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!

a {
  animation: flow 30s ease-in-out infinite;
  background: linear-gradient(-60deg, #904e95, #e73c7e, #ee7752);
  background-size: 300%;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

# Let's deconstruct it

So first thing in my CSS is the animation rules.

a {
  animation: flow 30s ease-in-out infinite;
}

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.

a {
  background: linear-gradient(-60deg, #904e95, #e73c7e, #ee7752);
  background-size: 300%;
}

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.

a {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

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.

@keyframes flow {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

Final result:

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