<h2 class="glitch-text" data-text="CodeRipple">
  CodeRipple
</h2>

.glitch-text{
  position:relative;
  margin:0;
  color:#ffffff;
  font-size:64px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:2px;
}

.glitch-text::before,
.glitch-text::after{
  content:attr(data-text);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.glitch-text::before{
  color:#22d3ee;
  transform:translateX(-2px);
  animation:glitchTop 1.8s infinite linear alternate-reverse;
}

.glitch-text::after{
  color:#d946ef;
  transform:translateX(2px);
  animation:glitchBottom 1.4s infinite linear alternate-reverse;
}

@keyframes glitchTop{
  0%{
    clip-path:inset(0 0 70% 0);
  }

  50%{
    clip-path:inset(30% 0 40% 0);
    transform:translateX(-4px);
  }

  100%{
    clip-path:inset(70% 0 0 0);
    transform:translateX(2px);
  }
}

@keyframes glitchBottom{
  0%{
    clip-path:inset(65% 0 0 0);
  }

  50%{
    clip-path:inset(45% 0 25% 0);
    transform:translateX(4px);
  }

  100%{
    clip-path:inset(0 0 70% 0);
    transform:translateX(-2px);
  }
}

How This Glitch Text Effect Works

The Glitch Text Effect creates a digital distortion by layering two animated copies of the original text over the main heading.

The ::before and ::after pseudo-elements use content: attr(data-text) to create duplicate versions of CodeRipple without adding extra HTML elements.

The ::before layer uses cyan #22d3ee, while the ::after layer uses magenta #d946ef. Small horizontal offsets separate these layers from the white base text and create the RGB-style glitch appearance.

The clip-path: inset() values expose different horizontal sections of each colored layer during the animation. This makes different parts of the text appear to shift independently. You can learn more about clipping elements into custom visible regions in the MDN Web Docs guide to clip-path.

The cyan layer runs the glitchTop animation for 1.8s, while the magenta layer uses glitchBottom for 1.4s. Their different timings prevent both layers from moving together and make the distortion feel less uniform.

Horizontal translateX() movements between -4px and 4px add quick side-to-side displacement, while both animations repeat infinitely to maintain the continuous digital glitch effect.

Customizing This Glitch Text Effect

You can customize the Glitch Text Effect by changing the layer colors, movement distance, animation speed, and clipping positions.

• Cyan layer: Change #22d3ee to another accent color.
• Magenta layer: Replace #d946ef with a different secondary color.
• Horizontal distortion: Adjust the translateX() values to make the glitch stronger or softer.
• Animation speed: Change 1.8s and 1.4s to control how fast each layer moves.
• Text size: Adjust 64px for larger or smaller headings.
• Glitch slices: Modify the clip-path: inset() values to reveal different sections of the duplicated text layers.

Where to Use This Glitch Text Effect

The Glitch Text Effect works well when you want typography to feel digital, energetic, or technology-focused without adding complex JavaScript.

• Hero headings: Add a strong animated title to technology or developer websites.
• Gaming websites: Create arcade, cyberpunk, or futuristic-style headings.
• Portfolio websites: Highlight developer or creative project titles.
• Landing pages: Draw attention to important promotional headings.
• Error pages: Give 404 or system-style messages a digital distortion effect.
• Dark interfaces: The cyan and magenta layers stand out clearly against dark backgrounds.

Because the effect uses CSS pseudo-elements, clip-path, transforms, and keyframe animations, the complete glitch movement works without JavaScript.

If you want a cleaner animated typography style, check out the Text Reveal Effect, which uses masked vertical movement and opacity to smoothly reveal and hide text.

Frequently Asked Questions

Does the Glitch Text Effect require JavaScript?
No. The entire visual glitch animation is created with CSS pseudo-elements, transforms, clip-path, and keyframes.

Why is the data-text attribute required?
The ::before and ::after pseudo-elements use attr(data-text) to create the cyan and magenta copies of the original text.

Can I make the glitch effect stronger?
Yes. Increase the translateX() values and adjust the clip-path positions to create more aggressive distortion.

Can I change the glitch colors?
Yes. Replace the cyan #22d3ee and magenta #d946ef values with any colors that match your design.

The Glitch Text Effect combines layered colors, clipped text sections, and horizontal distortion to create a sharp digital animation. Its CSS-only structure keeps it lightweight and easy to customize for gaming websites, developer portfolios, hero headings, landing pages, and futuristic interfaces.