Text Glitch Effect in HTML & 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 to understand 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]

As always, before sharing the codes of this program (Text Glitch Effect). Let's a few talk about the main tags and codes of this program. As you already know, this is a pure CSS program. First, I created a <div> with the class name "content" and placed another <div> tag inside it. Inside <div> class name "text" I used data-text attribute to create two duplicate texts.

In the CSS File, first I placed a text element at the center using the CSS Flex property. After that, I did basic styling to text like colors, font-size, font-weight, etc. I used google Poppins font for text. The user ::before and ::after pseudo-elements I created two duplicate color texts. Then using @keyframe I create an animation to moved randomly those texts to show a glitch effect. Inside @keyframes I used clip: rect; property.

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 these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <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>

CSS FILE:

@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);
  }
}

Video Tutorial of CSS Text Glitch Effect

Text Glitch Effect in HTML & CSS [Source Codes]

Thanks for visiting, Keep visiting.

2 Comments

Post a Comment

About Us

Contact Form

Text Glitch Effect in HTML & CSS

Video Tutorial of CSS Text Glitch Effect

Text Glitch Effect in HTML & CSS [Source Codes]

Thanks for visiting, Keep visiting.

You might like

2 Comments

Post a Comment

Contact Form