How To Create Animated Text Background Effect In CSS

Today in this video you will see how to add animated text on your website. As you can see to click demo button. It is very easy to add this kind of background effect on your website. So without wasting any time let’s quickly start this tutorial.

Demo Download

Steps to Create Animated Text Background Effect using HTML & CSS

To create a animated text background effect we need to follow the below steps.

  1. Write an HTML Markup
  2. Write CSS

1. Write an HTML Markup

First we need to create an index.html file and paste the following HTML markup in it.

<!DOCTYPE html>
<html>
<head>
	<title>Text Effect</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>T-Code Scripts</h1>
</body>
</html>

As you can see above HTML file i will write one title so i am using h1 and let’s write the title ‘T-Code Scripts’.

2. Write CSS

Now we need to Style our animation, paste the following styles in CSS either in head section or you can also include external style sheet.

*
{
	margin: 0;
	padding: 0;
}
h1{
	font-family: sans-serif;
	text-align: center;
	margin-top: 150px;
	font-size: 150px;
	font-weight: 800;
	color: transparent;
	background-image: url(https://media.giphy.com/media/l0MYMranKNhMUFveE/giphy.gif);
	background-position: center;
	-webkit-background-clip: text;
}

Above CSS is very simple, here we will write H1 and for this one i will write a font family let’s change the font style and next i am writing text align, after that i am adding margin top to add some a space from the top. Next i will add font size and font weight it will be 800. Lets add color transparent so after adding this you can see this text in not visible because we have added color transparent after that we will add background image and URL, here we have to add some GIF file you can go to the website called ‘GIPHY.COM’ so i am use this GIF which mentioned in code area. Next we will add background position it will be Center . We have to add one more line we will add Webkit Background Clip so it will be text that’s it.

Conclusion

Today we learnt how to create animated text background effects on website using HTML & CSS, you can add multiple effects just by adding the GIF and text source in HTML markup and changing names and same as in css file.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *