How to Create an Animated Filled Text with CSS

Have you ever created texts with animated shadows or gradients? If no, this snippet is for you. It will help you to create such texts and make your website more creative.

The easiest method of creating such texts is using the CSS background-clip property, which specifies how far the background-color and background-image should be from the element.

Let’s try to create one together.

Create HTML

Set the <div> tag and give it a <span class="attribute">class</span> name “animated-text”

How to create an HTML <div> tag ?

<div class="animated-text">
  Trust yourself!
</div>

Add CSS

Use the background-image property to specify background images for elements. We choose the value and also the colors of the background.

Info

<span class="property">background-clip: text</span> is now widely supported in all modern browsers (Chrome, Firefox, Safari, Edge) without vendor prefixes.

Use the text-fill-color property. Here, we need to make our text-fill-color transparent so that the background image can be visible.
Put the background-size property, which defines the size of the background image.
Use the background-clip property. Choose the “text” value, so the background is painted within the foreground text.
Add animation to the text. And of course, here we need the CSS @keyframes, which will help us to specify what should happen at specific moments during the animation by defining styles for keyframes (or waypoints) along the animation sequence.

If you want the animation to play endlessly, you should use the “infinite” value. You can use different values of the CSS animation property and make your animation more creative.

How to style an HTML <div> tag using CSS background-image, background-size, background-clip, animation and font-size properties?

.animated-text {
  background-image: linear-gradient(DarkSalmon 50%, LightYellow 50%);
  background-size: 100% 50px;
  text-fill-color: transparent;
  background-clip: text;
  animation: stripes 2s linear infinite;
  font-size: 100px;
}

@keyframes stripes {
  100% {
    background-position: 0 -50px;
  }
}

Now let’s put it all together and try some examples.

Example of creating an animated filled text by using the “linear-gradient” value of the background-image property:

An example of how to create an animated filled text in CSS

<!DOCTYPE html>
<html>
  <head>
    <style>
      .animated-text {
        background-image: linear-gradient(DarkSalmon 50%, LightYellow 50%);
        background-size: 100% 50px;
        text-fill-color: transparent;
        background-clip: text;
        animation: stripes 2s linear infinite;
        font-size: 100px;
      }
      @keyframes stripes {
        100% {
          background-position: 0 -50px;
        }
      }
    </style>
  </head>
  <body>
    <div class="animated-text">
      Trust yourself!
    </div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5">``<div class="animated-text"> Trust yourself! </div> </div>Instead of the "linear-gradient" value, you can choose the "URL" value of the CSS background-image property and add any image.

Example of creating an animated filled text by using the "URL" value of the background-image property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .animated-text {
        font-family: Impact;
        background-image: url("https://bureau.ru/var/files/img1532613761");
        background-size: 100% 50px;
        text-fill-color: transparent;
        background-clip: text;
        animation: stripes 2s linear infinite;
        font-size: 100px;
      }
      @keyframes stripes {
        100% {
          background-position: 0 -50px;
        }
      }
    </style>
  </head>
  <body>
    <div class="animated-text">
      Trust yourself!
    </div>
  </body>
</html>

Try it Yourself »