Pure CSS Glitch Effect on Text

This code snippet demonstrates a pure CSS glitch effect on text. The code utilizes keyframes and pseudo-elements to create an animated glitch effect that adds a unique and eye-catching visual style to the text.

The glitch effect is achieved by animating the clip property of the pseudo-elements :after and :before. The noise-anim and noise-anim-2 keyframes define the clipping positions at different intervals, creating a distorted and flickering appearance. This code can be helpful for adding a glitch effect to headings, titles, or other text elements on a web page, providing an edgy and futuristic aesthetic.

If you want to apply a glitch effect to an image, check this tutorial.

How to Create Pure CSS Glitch Effect on Text

1. First, let’s set up the HTML structure required for our glitch effect. Create a <div> element with the class name “glitch” and add the desired text inside it.

<div class="glitch" data-text="CodePel">CodePel</div>

2. To achieve the glitch effect, use CSS keyframes and pseudo-elements. Within the @keyframes noise-anim block, we’ll define the clipping positions at different intervals to create the glitch effect. Each keyframe will specify the clip property value.

body{
  background: black !important;
  font-family: 'Varela', sans-serif;
}

.glitch {
  color: white;
  font-size: 100px;
  position: relative;
  width: 400px;
  margin: 0 auto;
}

@keyframes noise-anim {
  0% {
    clip: rect(90px, 9999px, 61px, 0);
  }
  5% {
    clip: rect(98px, 9999px, 17px, 0);
  }
  10% {
    clip: rect(90px, 9999px, 83px, 0);
  }
  15% {
    clip: rect(53px, 9999px, 61px, 0);
  }
  20% {
    clip: rect(61px, 9999px, 82px, 0);
  }
  25% {
    clip: rect(36px, 9999px, 24px, 0);
  }
  30% {
    clip: rect(84px, 9999px, 56px, 0);
  }
  35% {
    clip: rect(85px, 9999px, 99px, 0);
  }
  40% {
    clip: rect(92px, 9999px, 32px, 0);
  }
  45% {
    clip: rect(97px, 9999px, 58px, 0);
  }
  50% {
    clip: rect(63px, 9999px, 34px, 0);
  }
  55% {
    clip: rect(27px, 9999px, 79px, 0);
  }
  60% {
    clip: rect(88px, 9999px, 41px, 0);
  }
  65% {
    clip: rect(71px, 9999px, 10px, 0);
  }
  70% {
    clip: rect(10px, 9999px, 64px, 0);
  }
  75% {
    clip: rect(47px, 9999px, 74px, 0);
  }
  80% {
    clip: rect(8px, 9999px, 96px, 0);
  }
  85% {
    clip: rect(24px, 9999px, 15px, 0);
  }
  90% {
    clip: rect(98px, 9999px, 11px, 0);
  }
  95% {
    clip: rect(56px, 9999px, 75px, 0);
  }
  100% {
    clip: rect(44px, 9999px, 91px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(31px, 9999px, 16px, 0);
  }
  5% {
    clip: rect(79px, 9999px, 52px, 0);
  }
  10% {
    clip: rect(27px, 9999px, 22px, 0);
  }
  15% {
    clip: rect(34px, 9999px, 38px, 0);
  }
  20% {
    clip: rect(10px, 9999px, 68px, 0);
  }
  25% {
    clip: rect(10px, 9999px, 49px, 0);
  }
  30% {
    clip: rect(90px, 9999px, 3px, 0);
  }
  35% {
    clip: rect(44px, 9999px, 89px, 0);
  }
  40% {
    clip: rect(71px, 9999px, 50px, 0);
  }
  45% {
    clip: rect(46px, 9999px, 63px, 0);
  }
  50% {
    clip: rect(72px, 9999px, 81px, 0);
  }
  55% {
    clip: rect(82px, 9999px, 48px, 0);
  }
  60% {
    clip: rect(14px, 9999px, 85px, 0);
  }
  65% {
    clip: rect(3px, 9999px, 22px, 0);
  }
  70% {
    clip: rect(100px, 9999px, 62px, 0);
  }
  75% {
    clip: rect(29px, 9999px, 38px, 0);
  }
  80% {
    clip: rect(19px, 9999px, 84px, 0);
  }
  85% {
    clip: rect(71px, 9999px, 21px, 0);
  }
  90% {
    clip: rect(57px, 9999px, 57px, 0);
  }
  95% {
    clip: rect(20px, 9999px, 5px, 0);
  }
  100% {
    clip: rect(75px, 9999px, 99px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

In the above code, we set the background color of the body to black, and the text color to white, and adjust the font size and positioning of the glitch text. Feel free to modify these styles according to your preferences.

That’s all! hopefully, you have successfully created a glitch text effect. If you have any questions or suggestions, feel free to comment below.