CSS Gradient Text Background Animation

CSS Gradient Text Background

Text animation plays an important role in bringing dynamic and engaging visual effects to any website text content. Animating static text enhances its overall user experience. Using this will help to increase user engagement, interaction, and attention. Today, We are going to create a gradient text animation that can be used on the website homepage or any other element. The following video tutorial shows the steps to make it. To get a clear idea, watch the video below. There are many more videos on web design in our channel. If you like the video, you can subscribe to our YouTube channel.

Video Tutorial:

I hope you have seen the video. CSS gradient is a web design technique that creates a smooth transition between two or more colors. A gradient color can contain one or more colors. A homepage or other element created with a CSS gradient background has more visual appeal than any other element. This gradient animation can be used in backgrounds, buttons, links, and other interface elements for a more attractive look. We have given a gradient color to the header text in this snippet. Then we got our desired text animation by changing its background-position value using the CSS keyframes animation property.

You May Also Like:

CSS Gradient Text Background Animation [ Source Code ]:

To create this Gradient Text Background Animation you have to create an HTML and a CSS file. After that copy and paste the following codes into your project. In case of any error, you can download the same code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
   <!--divinectorweb.com  -->
<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>Gradient text animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>Gradient <span>text effect</span></h2>
</body>
</html>

ADD CSS:

body{
  display: flex;
  justify-content: center;  
  align-items: center;
  height: 100vh;
  background: #000;
}
h2 {
	font-size: 200px;
	font-family: bebas neue;
	background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: animate 5s ease-in-out infinite;
	text-align: center;
	line-height: 0.9;
}
h2 span{
  font-weight: 300;
  font-size: 163px;
  display: block;
}
@keyframes animate{
  0%{
    background-position: 0 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0 50%;
  }
}

We hope the animation is working for you. Our website has snippets on CSS Animation, Responsive Website Design, and many more. If you want to collect more source code then click on load more button below the homepage of our website. If you like the content of the website, 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