How to Animate Text Gradients and Patterns in CSS — SitePoint

On this quick tip, we’ll current how easy it is to animate a background gradient with CSS.

In a modern article, we confirmed recommendations on the way to set a background gradient on textual content material. The CodePen demo underneath reveals the consequence.

Be sure that to study by means of that article if you’re undecided how we purchased to this consequence, as we’ll assemble on this occasion underneath.

For the sake of this demo, let’s add in some extra colors to our gradient background:

h1 {
  background-image: linear-gradient(
    45deg,
    #ffb3ba,
    #c49c6e,
    #bfbf76,
    #77b084,
    #ff7e74,
    #3b82f6,
    #c084fc,
    #db2777
   );
}

If we flip off background-clip: textual content material and text-color: clear for a second, we get a higher sense of how our gradient fills the textual content material’s content material materials discipline.

Let’s now endure the steps of animating our background gradient.

Step 1: Adjusting the Background Dimension

To animate our gradient background, we have now to make it higher than the textual content material’s content material materials discipline so we’ll’t see all of it immediately. We’ll do this with the helpful background-size property. (You can study all about background-size proper right here.)

I’m going to set the width of our background gradient to a couple cases the width of our heading ingredient:

h1 {
  background-size: 300% 100%;
}

Now, solely a third of the gradient background might be seen at anybody time, as seen underneath.

Step 2: Setting an Animation

Subsequent, we’ll prepare an animation that may switch the background spherical so that we’ll see completely totally different parts of it over time.

We’ll prepare a simple animation rule like so:

h1 {
  animation: gradientAnimation 8s linear infinite;
}

That may switch the background backwards and forwards as quickly as every 16 seconds.

Subsequent, we’ll prepare an @keyframes assertion:

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

This simple @keyframes assertion will switch our background from the very best left to the underside correct every eight seconds.

Throughout the Pen underneath, we’ve as quickly as as soon as extra disabled background-clip: textual content material and color: clear so we’ll see what’s going down inside the background.

As quickly as we re-enable background-clip: textual content material and color: clearwe see the finished product.

Pretty cool!

Animating a Background Image

In our article on together with gradient outcomes and patterns to textual content material, we moreover used a floral background image. (See the Pen for that proper right here.)

Let’s have a go at animating that background too. We’ll do it barely another way, as we don’t must distort the background image.

Let’s take away background-size: embrace from the distinctive demo and by no means set a background measurement the least bit. That leaves us with this:

h1 {
  color: clear;
  -webkit-background-clip: textual content material; 
  background-clip: textual content material; 
  background-image: url(floral.jpg);
  -webkit-text-stroke: 1px #7512d7;
  text-stroke: 1px #7512d7;
  animation: gradientAnimation 20s linear infinite;
  animation-direction: alternate;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

The result is confirmed inside the CodePen demo underneath.

Attempt turning off background-clip: textual content material and text-color: clear for a second in the event you want to see what’s going down inside the background.

Our background image is repeating by default, which doesn’t look too unhealthy for this particular image. (Merely out of curiosity, try together with background-repeat: no-repeat to see what what happens and never utilizing a repeating background.) In several situations, the place the background image doesn’t tile so correctly, you might must cease the image repeating after which use background-size to make the image larger, like we did with the gradient background above. As an example:

h1 {
  background-repeat: no-repeat;
  background-size: 120%;
}

Proper right here’s the affect of doing that on our floral demo.

Conclusion

We might do far more spectacular animations that this, nevertheless the purpose was to keep up it simple proper right here. You can dig deeper into CSS keyframes and animations in The best way to Get Started with CSS Animation. Chances are you’ll as nicely fiddle with the timing of the animation, angle of the gradient and so forth.

As talked about inside the earlier article, have pleasurable with this nevertheless don’t go overboard, as an extreme quantity of of such a animation can turn into annoying. A fragile animated background on a heading might merely add that contact of curiosity or intrigue it is important to protect your viewers engaged.