MakerBox

CSS Glitch Text Generator (Animated RGB-Split Effect)

Generate animated glitch text as pure CSS — RGB split, static, transformation or all in one — live preview, colour pickers, intensity and speed sliders. Free.

Live preview
GLITCH
HTML & CSS
<div class="glitch-wrapper">
  <span class="glitch" data-text="GLITCH">GLITCH</span>
</div>

<style>
.glitch-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 2rem;
  background-color: #0b0b12;
}

.glitch {
  position: relative;
  display: inline-block;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  max-width: 100%;
  overflow-wrap: anywhere;
}

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

.glitch::before {
  text-shadow: -3px 0 #ff00c1;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  text-shadow: 3px 0 #00fff9;
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip-path: inset(8% 0 78% 0); transform: translate(-3px, 0); }
  16% { clip-path: inset(45% 0 40% 0); transform: translate(3px, 0); }
  32% { clip-path: inset(68% 0 15% 0); transform: translate(-1.8px, 0); }
  48% { clip-path: inset(22% 0 60% 0); transform: translate(2.4px, 0); }
  64% { clip-path: inset(82% 0 6% 0); transform: translate(-3px, 0); }
  80% { clip-path: inset(35% 0 52% 0); transform: translate(1.2px, 0); }
  100% { clip-path: inset(60% 0 28% 0); transform: translate(3px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip-path: inset(70% 0 12% 0); transform: translate(3px, 0); }
  18% { clip-path: inset(30% 0 55% 0); transform: translate(-3px, 0); }
  34% { clip-path: inset(55% 0 30% 0); transform: translate(1.5px, 0); }
  52% { clip-path: inset(12% 0 74% 0); transform: translate(-2.1px, 0); }
  66% { clip-path: inset(48% 0 40% 0); transform: translate(3px, 0); }
  84% { clip-path: inset(78% 0 8% 0); transform: translate(-1.2px, 0); }
  100% { clip-path: inset(25% 0 62% 0); transform: translate(-3px, 0); }
}
</style>

🔒 The preview and code are generated in your browser — nothing is uploaded.

What this glitch text generator does

This tool builds a complete, copy-and-paste block of CSS for the classic RGB-split glitch effect. Your text is duplicated into two coloured layers that are jittered sideways, so the word looks like it is tearing apart into two coloured fringes. Pick one of four effects: Colour split and Static slice those layers into shifting horizontal bands with clip-path keyframes, Transformation drops the slicing and lets the layers drift while the whole word skews, and All in one runs the bands and the skew together. It is pure CSS with no JavaScript and no images — just two pseudo-elements and @keyframes. Type your text, choose a base colour, two glitch colours and a background, then drag the intensity, speed and font-size sliders while the live preview updates in real time.

How to use the generated CSS

The snippet targets the markup shown in the header comment: <span class="glitch" data-text="HELLO">HELLO</span>. The two pseudo-elements read their copies from the data-text attribute, so the same rule works for any string without editing the CSS. Intensity scales how far the coloured layers are offset and speed scales the animation duration, so a higher speed gives a faster, choppier flicker. Copy the CSS or download it as a file and drop it into your stylesheet.

Frequently asked questions

Why is the glitch effect not showing after I paste the CSS?

The effect needs a data-text attribute that matches the visible text. Give the element both the glitch class and a data-text value set to the same string, for example <code>&lt;span class="glitch" data-text="HELLO"&gt;HELLO&lt;/span&gt;</code>. The pseudo-elements pull their coloured copies from that attribute, so without it there is nothing to split.

Does the animation use JavaScript?

No. The glitch is built entirely from CSS pseudo-elements and keyframe animations — clip-path bands for Colour split, Static and All in one, plain transforms for Transformation — so it runs with no scripts. Everything is generated locally in your browser and nothing is uploaded.