Connect with us!

Text Gradient Animation HTML and CSS

Salow
January 9, 2023
Animation, CSS

Animated Gradient Text. Let’s make that animated gradient text effect with HTML and CSS using your favorite code editor Visual Studio Code.

CSS Properties

Following are the CSS properties used:

-webkit-text-fill-color: The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set, the value of the color property is used.
Background-size: The background-size CSS property sets the size of the element’s background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
Font-size: The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.
Margin-left: The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
Background: The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.”/><style media=”print
Font-weight: The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.
-webkit-background-clip: The background-clip CSS property sets whether an element’s background extends underneath its border box, padding box, or content box.

Text Gradient Code Block

Here is the code for implementing the Text Gradiant Animation.

.gradiant-ani {
        margin-left: 50px;
        background: linear-gradient(
          to right,
          #ffb703 40%,
          #01ef96 50%,
          #fb8500 70%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
        font-size: 4em;
        
      }

Yay! We have created the static Text Gradiant Animation.

Here is the output:

Gradient Text Animation CSS HTML

Text Gradient CSS Animation

flow animation can be implemented by scaling up and down the shape linearly.

Following are the classes used for animation.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Here is the CSS animation class implementing CSS.

@keyframes  flow {
        to {
          background-position: 200% center;
        }
      }

The following way is to declare the CSS Class inside the class block.

 .gradiant-ani {
        margin-left: 50px;
        background: linear-gradient(
          to right,
          #ffb703 40%,
          #01ef96 50%,
          #fb8500 70%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
        font-size: 4em;
        animation: flow 2s linear infinite;
      }
      @keyframes flow {
        to {
          background-position: 200% center;
        }
      }

Following is the output for Text Gradiant Animation animation.

Text Gradiant Animation CSS HTML

Text Gradient Video Tutorial

You can find the complete coding tutorial in the following YouTube Short video.

Complete Code using HTML and CSS

Copy and paste the complete code in Visual studio code to view the output.


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .gradiant-ani {
        margin-left: 50px;
        background: linear-gradient(
          to right,
          #ffb703 40%,
          #01ef96 50%,
          #fb8500 70%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
        font-size: 4em;
        animation: flow 2s linear infinite;
      }
      @keyframes flow {
        to {
          background-position: 200% center;
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Text Gradiant Animation</h1>
    <div class="gradiant-ani">Salow Studios</div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Text Gradiant Animation Animation using CSS and HTML. See you in next tutorial!