Glitch Text Effect
RGB-split glitch text with two offset color layers jittering — a cyberpunk look.
<h2 class="glitch" data-text="GLITCH">GLITCH</h2>body{background:#0d1426}
.glitch{position:relative;margin:0;font:800 56px/1 ui-monospace,monospace;color:#fff;letter-spacing:4px}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%}
.glitch::before{color:#ff477e;animation:gl1 2.5s infinite linear alternate-reverse;clip-path:inset(0 0 60% 0)}
.glitch::after{color:#00d4ff;animation:gl2 2s infinite linear alternate-reverse;clip-path:inset(60% 0 0 0)}
@keyframes gl1{0%{transform:translate(0)}20%{transform:translate(-3px,1px)}40%{transform:translate(2px,-1px)}60%,100%{transform:translate(0)}}
@keyframes gl2{0%{transform:translate(0)}25%{transform:translate(3px,-1px)}50%{transform:translate(-2px,1px)}75%,100%{transform:translate(0)}}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.