Tanay's Blog

Make your text nicer by using gifs as text background😉

Make your text nicer by using gifs as text background😉

Tanay Gupta's photo
Tanay Gupta
·

1 min read

text2image_J6184496_20211127_160126.png


So, today I am going to demonstrate how you can make awesome text in which the background animates by the "gif nature"

Firstly, download any gif image from the Internet. Here, I have chosen this image from Google: images.app.goo.gl/FBrmNzT5L6jkDCvBA

Then, write the markup:

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Awesome Text</title>
</head>
<body>
    <h1>Hello world!</h1>
</body>
</html>

And add the following css:

h1{
    font-size: 120px;
    background-image: url('AlertMerryFugu-max-1mb.gif');
    background-clip: text;
    -webkit-background-clip: text;
    color:transparent;
}

And that's it! We have the amazing text ready! 🥳

See a preview at tanay360.github.io/New-repo





Also, check out my apps from play store if you like the post!

Good bye! ^_^

CSSHTML
Â