DEV Community

Cover image for How to Create a Text Glitch Effect with CSS
Shefali
Shefali

Posted on • Originally published at shefali.dev

How to Create a Text Glitch Effect with CSS

#webdev #programming #css #animation

Want to make your text look cool with a glitch effect? In this post, I’ll show you how to create a text glitch effect using only CSS animations, no JavaScript needed!

It’s a fun way to add style to headings, banners, or any part of your website where you want that techy, glitchy look.

Let’s start building this cool text glitch effect step by step!

CSS Text Glitch Effect

Step 1: Set Up the Basic HTML 

<div class="text" title="Glitch">
  Glitch
</div>
Enter fullscreen mode Exit fullscreen mode
  • Here we use a <div> with the class text.
  • The title attribute holds the text, which we’ll reuse in the animation.

Step 2: Style the Main Text 

.text {
  font-size: 26px;
  color: #000;
  font-weight: bold;
  animation: text-animation 1s linear infinite;
}
Enter fullscreen mode Exit fullscreen mode
  • This styles the text’s size, color, and makes it bold.
  • We apply the text-animation to move the text slightly, making it glitch.

Step 3: Create Two Layers with Pseudo-elements 

.text:before,
.text:after {
  content: attr(title);
  position: absolute;
  left: 0;
}
Enter fullscreen mode Exit fullscreen mode
  • We create two layers of text using ::before and ::after.
  • content: attr(title) takes the text from the title attribute and displays it.
  • Later, we’ll clip and animate them differently to make the glitch effect.

Step 4: Style the Top Layer 

.text:before {
  animation: text-animation-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%);
}
Enter fullscreen mode Exit fullscreen mode
  • We only show the top part of the text using clip-path.
  • The animation text-animation-top moves this layer in different directions.

Step 5: Style the Bottom Layer 

.text:after {
  animation: text-animation-bottom 1.5s 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%);
}
Enter fullscreen mode Exit fullscreen mode
  • We only show the bottom part of the text.
  • This layer has a slightly different animation speed to make the glitch feel more interesting.

Step 6: Animate the Whole Text 

@keyframes text-animation {
  2%, 64% {
    transform: translate(2px, 0) skew(0deg);
  }
  4%, 60% {
    transform: translate(-2px, 0) skew(0deg);
  }
  62% {
    transform: translate(0, 0) skew(5deg);
  }
}
Enter fullscreen mode Exit fullscreen mode
  • This animation makes the whole text move a little side to side and skew briefly.
  • These quick changes make it look like the text is shaking.

Step 7: Animate the Top Layer 

@keyframes text-animation-top {
  2%, 64% {
    transform: translate(2px, -2px);
  }
  4%, 60% {
    transform: translate(-2px, 2px);
  }
  62% {
    transform: translate(13px, -1px) skew(-13deg);
  }
}
Enter fullscreen mode Exit fullscreen mode
  • The top part of the text shakes and twists at certain times.
  • This creates the glitch burst effect.

Step 8: Animate the Bottom Layer 

@keyframes text-animation-bottom {
  2%, 64% {
    transform: translate(-2px, 0);
  }
  4%, 60% {
    transform: translate(-2px, 0);
  }
  62% {
    transform: translate(-22px, 5px) skew(21deg);
  }
}
Enter fullscreen mode Exit fullscreen mode
  • The bottom part moves in different directions at set intervals.
  • The randomness makes the glitch effect feel more natural.

Final Notes

  • These steps create a layered glitch animation using only CSS.
  • You can adjust the timing, movement, and clipping to make it stronger or more subtle.
  • Avoid using glitch effects on long blocks of text; they can become hard to read.
  • You can pair it with bold fonts to make it stand out more.
  • Use it sparingly on headings or call-to-action buttons to maintain user experience.
  • Check out CSSnippets for more UI components and effects you can easily integrate into your projects!

That’s all for today!

For paid collaboration, connect with me at: connect@shefali.dev

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

Top comments (0)