1. Tutorials
  2. CSS
  3. Glitch Effect

Glitch Effect

In this tutorial, you will learn how to apply a glitch effect to a text with CSS. Transform translate and skew are applied to the before and after pseudo elements to achieve the effect. Watch the video below for a detailed tutorial.

HTML

<body>
    <div class="container">
        <h1>Error</h1>
    </div>
</body>

CSS

body {
  background: #2e3537;
  font-family: 'Roboto', sans-serif;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: white;
  font-size: 6em;
}

.container h1 {
  animation: glitch 1s linear infinite;
}

@keyframes  glitch {
  0%, 65% {
    transform: translate(2px, 0) skew(0deg);
  }
  5%, 60% {
    transform: translate(-2px, 0) skew(0deg);
  }
  64% {
    transform: translate(0, 0) skew(5deg);
  }
}

.container h1:before, .container h1:after {
  content: 'Error';
  position: absolute;
  z-index: -1;
  left: 0;
  color: gray;
}

.container h1:before {
  animation: glitch-top 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes  glitch-top {
  0%, 65% {
    transform: translate(2px, -2px);
  }
  5%, 60% {
    transform: translate(-2px, 2px);
  }
  64% {
    transform: translate(13px, -1px) skew(-13deg);
  }
}

.container h1:after {
  animation: glitch-bottom 1s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes  glitch-bottom {
  0%, 65% {
    transform: translate(-2px, 0);
  }
  5%, 60% {
    transform: translate(-2px, 0);
  }
  64% {
    transform: translate(-22px, 5px) skew(21deg);
  }
}