Handitab

CSS Text Glitch Effect Generator

Generate a CSS glitch text effect with two offset color layers and an adjustable speed, previewed on your own text, then copy the code.

About CSS Text Glitch Effect Generator

A CSS glitch effect imitates a distorted video signal on text. This generator copies the text into two pseudo-elements with a data-text attribute, colors each copy, shifts them a few pixels left and right, and animates clip-path so only changing horizontal strips of each copy show. No images or script are needed. The output turns the animation off for visitors who prefer reduced motion, since flicker can be uncomfortable.

How to use CSS Text Glitch Effect Generator

  1. Fill in "Text", "First layer color", "Second layer color" and "Speed", and the other options.
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about CSS Text Glitch Effect Generator

Why does the element need a data-text attribute?

Pseudo-elements cannot read the text content of their element, but content: attr(data-text) can read an attribute. Repeating the text in data-text lets the two colored layers show the same words without duplicate markup.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
CSS Text ShadowGenerate a CSS text-shadow by adjusting horizontal offset, vertical offset, blur, and color with a live preview on sample text.CSS Triangle GeneratorGenerate a pure CSS triangle pointing up, down, left, or right with the border technique, by setting its width, height, and color.Darken ColorDarken a color by a chosen percentage by lowering its HSL lightness, and get the darker shade as HEX, RGB, and HSL codes.EM to PXConvert em units to pixels by multiplying by the font size of the element (16px by default), with rem, pt, and vw results as well.Flexbox PlaygroundTry CSS flexbox properties such as flex-direction, justify-content, align-items, flex-wrap, and gap on sample items and copy the CSS.Glassmorphism GeneratorGenerate CSS for a frosted glass (glassmorphism) effect by setting blur, background opacity, tint color, and corner radius with a preview.