CSS Glitch Text Effects

14 CSS glitch text animations: RGB split, slice and scanline glitches, VHS wobble and cyberpunk styles, built with pseudo-elements and clip-path.

Glitch Text

The classic RGB-split glitch: two offset copies of the text in cyan and magenta flicker through random clip-path slices. The copies read from a data attribute, so the markup is one element.

glitch · loop · dark

Glitch Rotating Text

Each word cuts in hard with a short glitch burst: tinted copies jump through clip-path slices and the letters jitter, then everything locks steady. steps() timing keeps the burst crisp.

loop · words · glitch

RGB Split Glitch Text

Red and cyan copies of the word sit behind it and snap out of register in hard steps, like a misaligned video signal. The copies read from a data attribute and only move with transform.

glitch · loop · colorful

Slice Glitch Text Effect

The word tears along a horizontal line and the two halves jump sideways, then snap back together. Two clip-path halves of the same text move apart, so there is never a doubled copy.

glitch · loop

Scanline Glitch Text

Interlaced text with a solid, displaced strip rolling down it like interference on an old monitor. The stripes are a repeating gradient clipped to the text; the strip is a clip-path copy.

glitch · retro · loop

Glitch Burst Text

Sits perfectly still, then breaks up for a split second: the word jolts and skews while colored slices fly off, and it snaps back clean. The long rest is what makes the burst land.

glitch · loop · colorful

Datamosh Glitch Text

Thin bands of the word stretch sideways into streaks, as if the video file were corrupted, while the letters snap between skews. Each streak is a clip-path band scaled on the X axis.

glitch · loop

VHS Glitch Text Effect

An on-screen VCR label with red and blue chroma bleed, a nervous horizontal wobble and a noisy tracking band that rolls through it. Monospace text; the play icon is one clipped span.

glitch · retro · loop

Hologram Text Effect

Translucent, scan-lined letters float over a projector beam, flicker, and get swept by a bright scan bar. The lines are a scrolling mask, the beam is a clipped gradient under the word.

glow · glitch · loop

Cyberpunk Glitch Text

A yellow, corner-cut label in the cyberpunk UI style that jolts every few seconds while inverted slices of it tear sideways. The yellow is fixed; the slices use your accent color.

glitch · colorful · loop

Glitch Reveal Text

The word stutters into existence through torn slices and color-split flashes, then settles perfectly clean and stays. Plays once; clip-path slices do the tearing, two copies do the color split.

glitch · reveal · one-shot

404 Glitch Text

A big 404 whose digits glitch one at a time, jumping, skewing and splitting into red and cyan, above a quiet PAGE NOT FOUND line. Each digit shares one keyframe and has its own delay.

glitch · letters · loop

Random Flicker Text Effect

Individual letters drop out and stutter back at what looks like random, like a failing display. Each letter runs the same keyframe at its own duration and offset, so the pattern never lines up.

glitch · letters · loop

No Signal Static Text

A small screen full of TV static with a NO SIGNAL label that flickers in front. The noise is one inline SVG turbulence filter, drawn once and jumped between offsets with steps().

retro · glitch · loop

How to use these glitch text

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required. Classes are prefixed per effect so several can share a page.

To change the color, set --txt-color on the element or any ancestor. To change the size, set --txt-size: offsets, shadows and letter spacing are all in em, so they follow the font size.

One-shot effects such as the typewriter and the reveals play when the element appears. To trigger them later, add the class when you need it, or toggle animation-play-state.

Every snippet ships with a prefers-reduced-motion rule that jumps straight to the finished state for people who asked their OS for less motion, so the text is always readable.