CSS TOOLS
CSS Text Glitch Generator.
Create animated neon glitch headlines with custom intensity and colors.
OZTOOL GLITCH
<h2 class="glitch" data-text="OZTOOL GLITCH">OZTOOL GLITCH</h2>
.glitch{position:relative;color:#111;font-weight:900}
.glitch:before,.glitch:after{content:attr(data-text);position:absolute;left:0;top:0}
.glitch:before{color:#ff0059;transform:translateX(3px);animation:glitchA .9s infinite}
.glitch:after{color:#00e5ff;transform:translateX(-3px);animation:glitchB .8s infinite}
@keyframes glitchA{50%{transform:translate(6px,-1px)}}@keyframes glitchB{50%{transform:translate(-6px,1px)}}
Three simple steps
How to use CSS Text Glitch Generator
1
Type your text
Enter any heading or short phrase.
2
Pick colors and intensity
Set color channels and animation offset strength.
3
Copy HTML/CSS
Paste both snippets into your project.