CSS Animated Text background

css animated text background

With CSS, we can apply various animation features to a text element. Some of these are changing text color, size, position, rotation, etc. Today we'll see how to create a colorful text background animation using CSS keyframes properties and linear-gradient colors. The video tutorial below shows the step-by-step process of creating this snippet. You are requested to watch the video tutorial before collecting the source code. This will help you understand your source code. There are many more videos on animation on our YouTube channel. If you find the contents of our channel useful, then subscribe and stay with us.

Video Demo:

We hope you have watched the video tutorial. Various websites use text animations to add visual interest and interactivity. Beautiful text animations make the content more engaging and memorable for users. In our text effect example, we created a linear-gradient function with 12 colors and animated it with the CSS keyframes property. CSS linear-gradient function is a powerful and flexible tool for designing attractive and visually engaging web pages. To create the gradient text background animation, first style the H1 text with background-clip: text. Then make the color transparent. Next, you need to set the background-image linear gradient with the colors of your choice. After that, the background size should be increased a little. Finally, the animation property needs to be set. CSS keyframes have five stages with five background-position values so that the linear gradient color continuously animates at a 45deg angle from the bottom-left corner to the top-right corner.

You May Also Like:

CSS Animated Text background [ Source Code ]:

First, create a CSS and an HTML file and link them. Then copy the code from the below code box and paste it into your project. Save the code and open it in your browser to see if it works. If it doesn't work then download the code from below download button. You can use this type of animated text to attract visitors to the heading or any important text of the website.

ADD HTML:

<!DOCTYPE html>
<!-- divinectorweb.com -->
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animated text Background </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="content">Animated Text <br /><span>Background</span></h1>

</body>
</html>

ADD CSS:

*{
  margin: 0;
  padding: 0; 
}
body{
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
  background: #000;
}
.content {
  font-size: 60px;
  line-height: 1;
  text-align: center;
  font-family: bebas neue;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(45deg, aqua, blue, Magenta, red, orange, yellow, green, cyan, blue, violet, cyan, skyblue);
  background-size: 400% 400%;
  animation: animate 15s ease infinite;
}
.content span{
  font-size: 80px;
}
@keyframes animate {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 100% 0;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0 100%;
  }
  100% {
    background-position: 0 0;
  }
}

Hope your code is working properly. To get more such snippets keep scrolling down by clicking on the Load More button at the bottom of our website homepage. If you find our content useful, please share it with others. Thank you very much for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box