Text Glitch Effect in HTML & CSS

2
Text Glitch Effect in HTML and CSS

Hello readers, Today in this blog you’ll learn how to create a Glitch Effect in Text using only HTML & CSS. Previously I have shared a Buttons with Cool Shining Hover Effect using HTML CSS, now it’s time to create a Text Glitch Effect in HTML & CSS.

I am sure that, You already know what is glitch effect. Mostly these types of glitch effects used in graphic designing, but some websites also use this effect. This is a pretty good effect to place on the website’s banner.
 
As you can see in the image, this is a glitch effect in the text. This is a pure CSS program. The whole concept is about that move different colors of text together. When 2 or 3 colors text will move randomly, then the glitch effect appears.If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Text Glitch Effect).

Video Tutorial of CSS Text Glitch Effect

 
If you like this program (Text Glitch Effect) and want to get codes of this. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Text Glitch Effect in HTML & CSS [Source Codes]

To create this program (Text Glitch Effect). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Text Glitch Effect | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="content">
         <h2 class="text" data-text="Text Glitch">
            Text Glitch
         </h2>
      </div>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}
.content{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .text{
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 45px;
  transform: scale(2);
  padding: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.content .text:before,
.content .text:after {
  padding: 30px;
  color: white;
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
  top: 0;
}
.content .text:before{
  left: 3px;
  text-shadow: -2px 0 red;
  animation: glitch-1 2s linear infinite reverse;
}
.content .text:after{
  left: -3px;
  text-shadow: -2px 0 blue;
  animation: glitch-2 2s linear infinite reverse;
}
@keyframes glitch-1 {
  0% {
    clip: rect(132px, auto, 101px, 30px);
  }
  5% {
    clip: rect(17px, auto, 94px, 30px);
  }
  10% {
    clip: rect(40px, auto, 66px, 30px);
  }
  15% {
    clip: rect(87px, auto, 82px, 30px);
  }
  20% {
    clip: rect(137px, auto, 61px, 30px);
  }
  25% {
    clip: rect(34px, auto, 14px, 30px);
  }
  30% {
    clip: rect(133px, auto, 74px, 30px);
  }
  35% {
    clip: rect(76px, auto, 107px, 30px);
  }
  40% {
    clip: rect(59px, auto, 130px, 30px);
  }
  45% {
    clip: rect(29px, auto, 84px, 30px);
  }
  50% {
    clip: rect(22px, auto, 67px, 30px);
  }
  55% {
    clip: rect(67px, auto, 62px, 30px);
  }
  60% {
    clip: rect(10px, auto, 105px, 30px);
  }
  65% {
    clip: rect(78px, auto, 115px, 30px);
  }
  70% {
    clip: rect(105px, auto, 13px, 30px);
  }
  75% {
    clip: rect(15px, auto, 75px, 30px);
  }
  80% {
    clip: rect(66px, auto, 39px, 30px);
  }
  85% {
    clip: rect(133px, auto, 73px, 30px);
  }
  90% {
    clip: rect(36px, auto, 128px, 30px);
  }
  95% {
    clip: rect(68px, auto, 103px, 30px);
  }
  100% {
    clip: rect(14px, auto, 100px, 30px);
  }
}
@keyframes glitch-2 {
  0% {
    clip: rect(129px, auto, 36px, 30px);
  }
  5% {
    clip: rect(36px, auto, 4px, 30px);
  }
  10% {
    clip: rect(85px, auto, 66px, 30px);
  }
  15% {
    clip: rect(91px, auto, 91px, 30px);
  }
  20% {
    clip: rect(148px, auto, 138px, 30px);
  }
  25% {
    clip: rect(38px, auto, 122px, 30px);
  }
  30% {
    clip: rect(69px, auto, 54px, 30px);
  }
  35% {
    clip: rect(98px, auto, 71px, 30px);
  }
  40% {
    clip: rect(146px, auto, 34px, 30px);
  }
  45% {
    clip: rect(134px, auto, 43px, 30px);
  }
  50% {
    clip: rect(102px, auto, 80px, 30px);
  }
  55% {
    clip: rect(119px, auto, 44px, 30px);
  }
  60% {
    clip: rect(106px, auto, 99px, 30px);
  }
  65% {
    clip: rect(141px, auto, 74px, 30px);
  }
  70% {
    clip: rect(20px, auto, 78px, 30px);
  }
  75% {
    clip: rect(133px, auto, 79px, 30px);
  }
  80% {
    clip: rect(78px, auto, 52px, 30px);
  }
  85% {
    clip: rect(35px, auto, 39px, 30px);
  }
  90% {
    clip: rect(67px, auto, 70px, 30px);
  }
  95% {
    clip: rect(71px, auto, 103px, 30px);
  }
  100% {
    clip: rect(83px, auto, 40px, 30px);
  }
}

That’s all, now you’ve successfully created a Text Glitch Effect in HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Previous articleButtons Shining Hover Effect using HTML & CSS
Next articleFacebook Wow Reaction Emoji in HTML & CSS

RELATED ARTICLESMORE FROM AUTHOR

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here