Awesome Glitching effect with CSS.

   by   Hemant Singh      /   last updated on - June 5, 2020

Blog Image

In this you will learn how to do glitching effect on any text using CSS.
This can be very useful highlighting our heading or any text.

Lets put the text which you want to have glitch effect inside any element , let "h1" and give it a class "glitch-effect".

Code Reversed attribute Image
Now rest is CSS , first understand what concept we are applying . What we will do is will create three layers of same text.
First is our original text and rest two are pseudo-elements on our main element. That is an ':after' and a ':before'.

Both there psuedo-element will have a 'content' property ,here we put the same text that we have in our main element.
And thus three layers of same text will be formed, then will give them different colors and animate them.

And will give them different Z-index for one to be on top of other.

Z-index is used to give preference to any layer when we have more than one layer on each other .Greater the value of Z-index more the precedence. So the layer which we want to keep on top has maximum Z-index value.
Code Reversed attribute Image

Code for pseudo-element :

Code Reversed attribute Image

We will animate with transform 'translate' to move pseudo elements in different direction thus creating the glitch effect.

Code Reversed attribute Image

Output :

Also read my poem :Khwab m bhi jeeta hu Click here
Also read my poem :Veer Jawan Click here
Also read this :Css Box model - Basic and very useful Click here
Also read blog :Health and wellness. Click here
See beautiful art :Uttrakhand tradition using art Click here
See beautiful art :Doodle art Click here

About Author

 ... ...  
Card image cap
Hemant Singh

Web developer | StartYourBlog
Web dev blogs | Poetry | Writer
CS(hons) DU
Never fear to start.

Read More Blogs