How to Create a Glitch Effect using CSS.

While browsing the internet sometimes we all come across some cool animations or effects. And we think about how someone made it. Is it even possible? One of these effects is the "Glitch effect". In this blog, we will learn how to make this effect using CSS.

Now let's start with our development environment. We need HTML5, CSS, and support for Web Browsers. I will be doing this CodePen.

Let's first Create an HTML File and write some content on it. I am writing the 'Glitch" word in <p> with the class "glitch" in it.

Now after this, It's all CSS.

First, we gave a background color of #222.

Centered the content using CSS Grid

Giving color "white" and font "sans-serif".

We gave a "font-size" of "6rem" and "font-weight" of "700"

And then "text-transform" to "Uppercase", It keeps the word in Capital Letters.

Here is the important CSS Property that we are using which is "text-shadow". As the name suggests it adds a shadow to texts.

We can give more than one shadow to a text. That's what we are going to do here.

Text-Shadow takes 4 parameters : 1st Parameter - horizontal distance between text and shadow 2nd Parameter - Vertical distance between text and shadow 3rd Parameter - helps in defining the amount of blur radius for shadow 4th Parameter - For the Color of the shadow.

keyframes help in executing animations. And here is the syntax of keyframes.

Here "glitch" is the parameter that we will use in animation property later to link keyframes and animation property. How and what changes are to be shown is specified here. In the form of 0% to 100%.

Here we divided changes into 7 Parts from 0 to 100. 0% > 14% > 15% > 49% > 50% > 99% and then 100%. You can see here a 1% difference in some, It's because using a 1% difference can help in smooth transitions.

Now we are finally at the last step

Now we are adding animation property to make it happen.

animation property can be seen in three parts here - 1. animation-name: glitch. This is the same glitch we defined in the keyframes property. 2. animation-duration: 500ms. In this property, we specify how much time animation should take from start to finish, here it's 500ms.

3. animation-iteration-count: infinite. Now, this property specifies the number of repetitions of the animation. It can be 3,4 or any value you like. We used "infinite" here.

We used all three properties in one line like this - animation: glitch 500ms infinite

After all this, you should end up with something like the image down here. And you can also see this effect in Codepen here too.

So, here we learned about the use of some properties of animation like "animation-name", "animation-duration" and "animation-duration-count". And to make smooth transitions we can keep the difference of 1% between percentages. Thank you for reading till the end. I hope you like it.