buncha/code & dev/css-text-glitch

CSS Text Glitch Generator

Pure-CSS chromatic-aberration text glitch. Two pseudo-element layers offset in opposite directions on independent animation cycles produce the broken-signal look. No images, no JS.

Text

Preset

Amplitude — 4px

Speed — 2.50s

Layer 1 colour

Layer 2 colour

Text colour

Preview bg

GLITCHGLITCHGLITCH

CSS

.glitch {
  position: relative;
  isolation: isolate;
  color: #1F1F1F;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.glitch::before,
.glitch::after {
  content: "GLITCH";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.glitch::before {
  color: #00f0ff;
  animation: bt-glitch-1 2.5s infinite linear alternate-reverse;
}
.glitch::after {
  color: #ff007a;
  animation: bt-glitch-2 2.5s infinite linear alternate-reverse;
}

@keyframes bt-glitch-1 {
  0%   { transform: translate(-4px, 2px); }
  25%  { transform: translate(-2px, 4px); }
  50%  { transform: translate(-4px, -2px); }
  75%  { transform: translate(2px, -4px); }
  100% { transform: translate(-4px, 2px); }
}
@keyframes bt-glitch-2 {
  0%   { transform: translate(4px, -2px); }
  25%  { transform: translate(2px, -4px); }
  50%  { transform: translate(4px, 2px); }
  75%  { transform: translate(-2px, 4px); }
  100% { transform: translate(4px, -2px); }
}

/* HTML: <h1 class="glitch" data-text="GLITCH">GLITCH</h1> */

Pure CSS animation — runs entirely in the browser, no runtime cost.

Pairs well with

Base64 Encoder / Decoder

UTF-8-safe Base64 encode and decode. Handles emoji…

Binary Converter

Convert text to binary and binary to text.

CSS Background Pattern Generator

Build tileable backgrounds with pure CSS gradients…

CSS Checkbox & Switch Generator

Pure-CSS checkbox and toggle-switch styles that ov…

About CSS Text Glitch Generator

Pure-CSS chromatic-aberration text glitch effect. Two pseudo-element layers offset on opposite animation cycles produce the broken-signal look. Four preset vibes plus full control over amplitude, speed, and colours.

Everything happens on your device. Close the tab and it's gone.