CSS Text Glitch Effect Generator

glitch

Glitch Effect

Text

Font Size: 80px

Background Color

Text Color

Glitch Color #1

Glitch Color #2

HTML & CSS Code

<div class="glitch-wrapper">
  <div class="glitch" data-glitch="glitch">glitch</div>
</div>

<style>
.glitch-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background-color: #222222;
}

.glitch {
  position: relative;
  font-size: 80px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
}

.glitch::before,
.glitch::after {
  content: attr(data-glitch);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #00ffff;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: 2px 0 #ff00ff;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(0); }
  20% { clip-path: polygon(0 5%, 100% 5%, 100% 35%, 0 35%); transform: translate(-2px, 2px); }
  40% { clip-path: polygon(0 15%, 100% 15%, 100% 55%, 0 55%); transform: translate(2px, -2px); }
  60% { clip-path: polygon(0 25%, 100% 25%, 100% 65%, 0 65%); transform: translate(-2px, -1px); }
  80% { clip-path: polygon(0 35%, 100% 35%, 100% 75%, 0 75%); transform: translate(2px, 1px); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(0); }
}

@keyframes glitch-anim-2 {
  0% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(0); }
  20% { clip-path: polygon(0 65%, 100% 65%, 100% 95%, 0 95%); transform: translate(2px, -2px); }
  40% { clip-path: polygon(0 45%, 100% 45%, 100% 85%, 0 85%); transform: translate(-2px, 2px); }
  60% { clip-path: polygon(0 35%, 100% 35%, 100% 75%, 0 75%); transform: translate(2px, 1px); }
  80% { clip-path: polygon(0 15%, 100% 15%, 100% 55%, 0 55%); transform: translate(-2px, -1px); }
  100% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(0); }
}</style>

Comments

Similar Coding Tools

See All

CSS Gradient Generator

Generate stunning CSS gradients with presets or custom controls.

Open

CSS Loader Generator

Browse and customize pure CSS loading animations.

Open

CSS Clip Path Generator

Generate CSS clip-path shapes for your projects.

Open

CSS Triangle Generator

Create CSS triangle shapes using the border method.

Open

What is CSS Text Glitch Effect Generator?

The CSS Text Glitch Effect Generator creates glitch effects on any text using only HTML and CSS. Choose from four styles: "Glitch with Color" (chromatic aberration with two accent colors), "Glitch with Noise" (flicker and offset layers), "Glitch with Transformation" (skew and translate animations), or "All-in-One" (color, noise, and transformation combined).

Customize the text, font size, background and text colors. For Color and All-in-One, you can set two glitch accent colors. The generated code uses a wrapper div, a glitch div with a data-glitch attribute, and CSS animations on pseudo-elements—no JavaScript required.

How to use the CSS Text Glitch Effect Generator?

Follow these steps:

1
Enter your text and adjust font size with the slider.
2
Select a glitch type: Glitch with Color, Glitch with Noise, Glitch with Transformation, or All-in-One.
3
Set background and text colors; for Color or All-in-One, set Glitch Color #1 and #2.
4
Copy the HTML & CSS code and paste it into your project.