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 class name “animated-text”
<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.

The text remains a text. It can be searchable, selectable and copyable.
  • 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.

Background-clip: text; works only in Webkit-based browsers (Google Chrome, Safari, Opera).
  • 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.

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

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

@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:

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

Result

Trust yourself!

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;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-animation: stripes 2s linear infinite;
        animation: stripes 2s linear infinite;
        font-size: 100px;
      }
      @-webkit-keyframes stripes {
        100% {
          background-position: 0 -50px;
        }
      }
    </style>
  </head>
  <body>
    <div class="animated-text">
      Trust yourself!
    </div>
  </body>
</html>

Example of creating an animated filled text:

<!DOCTYPE html>
<html>
  <head>
    <style>
      @import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
      .text {
        fill: none;
        stroke-width: 6;
        stroke-linejoin: round;
        stroke-dasharray: 70 330;
        stroke-dashoffset: 0;
        -webkit-animation: stroke 6s infinite linear;
        animation: stroke 6s infinite linear;
      }
      .text:nth-child(5n + 1) {
        stroke: #F2385A;
        -webkit-animation-delay: -1.2s;
        animation-delay: -1.2s;
      }
      .text:nth-child(5n + 2) {
        stroke: #F5A503;
        -webkit-animation-delay: -2.4s;
        animation-delay: -2.4s;
      }
      .text:nth-child(5n + 3) {
        stroke: #E9F1DF;
        -webkit-animation-delay: -3.6s;
        animation-delay: -3.6s;
      }
      .text:nth-child(5n + 4) {
        stroke: #56D9CD;
        -webkit-animation-delay: -4.8s;
        animation-delay: -4.8s;
      }
      .text:nth-child(5n + 5) {
        stroke: #3AA1BF;
        -webkit-animation-delay: -6s;
        animation-delay: -6s;
      }
      @-webkit-keyframes stroke {
        100% {
          stroke-dashoffset: -400;
        }
      }
      @keyframes stroke {
        100% {
          stroke-dashoffset: -400;
        }
      }
      /* Other styles */
      
      html,
      body {
        height: 100%;
      }
      body {
        background: #111;
        background-size: .2em 100%;
        font: 14.5em/1 Open Sans, Impact;
        text-transform: uppercase;
        margin: 0;
      }
      svg {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 600 300">
      <symbol id="s-text">
        <text text-anchor="middle" x="50%" y="50%" dy=".35em">
          Text
        </text>
      </symbol>
      <!-- Duplicate symbols -->
      <use xlink:href="#s-text" class="text"></use>
      <use xlink:href="#s-text" class="text"></use>
      <use xlink:href="#s-text" class="text"></use>
      <use xlink:href="#s-text" class="text"></use>
      <use xlink:href="#s-text" class="text"></use>
    </svg>
  </body>
</html>