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.
b
Built browser-first. Run by one developer.
Every tool runs on your device. No tracking pixels, no sign-up to start. The numbers below are pulled live from the registry.
386
Free tools
Across 14 categories
7
Visual editors
PDF · image · video · audio
34
Curated kits
By profession + lifestyle
27
AI tools
Powered by Claude API
Files never uploadNo tracking pixelsNo sign-up neededWorks in any modern browser
The handful of AI tools (paraphrase, summarise, blog, captions, etc.) send your prompt text to Anthropic's Claude API to do the work. Files, images, PDFs and video never leave your device. Pick the tools that fit your privacy comfort.