CodeKitHubWhat Is This Tool?
A CSS glitch effect fakes the look of a corrupted broadcast signal or a torn VHS tape by duplicating a piece of text twice using ::before and ::after pseudo-elements, offsetting each copy slightly with a colored text-shadow (classically red and cyan, echoing analog RGB signal errors), and animating each copy's clip-path with @keyframes so different horizontal slices of each colored copy flash in and out over time.
The technique needs no images, no JavaScript animation loop and no canvas — it's pure CSS layered on a single HTML element that carries its own text twice: once as real text content, and once via a data-text attribute that the pseudo-elements read with content: attr(data-text).
Source: CSS Pseudo-Elements Module Level 4, W3C — defines the ::before/::after pseudo-elements and the attr() function this effect is built from.
Why Use It?
- Live animated preview — see the actual glitching effect as you type and adjust settings, not just a static mockup.
- Two independently adjustable accent colors, defaulting to the classic red/cyan RGB-split look but customizable to match any brand or theme.
- Intensity slider controls the color-shadow offset in pixels; speed slider controls how fast the clip-path keyframes cycle.
- Copies both the CSS (including the full @keyframes blocks) and the exact HTML structure needed, since the effect depends on a data-text attribute matching the visible text.
- Pure CSS — no JavaScript required at runtime once it's on your page, and no external libraries or images to load.
- Free, no signup, runs entirely in your browser.
How to Use
- Type the text you want glitched into the text field — it updates the live preview immediately.
- Pick two accent colors; the classic default is red and cyan for a retro RGB-split look, but any two contrasting colors work.
- Adjust the intensity slider to control how far apart the two color layers sit — higher values read as a more aggressive glitch.
- Adjust the speed slider to control how fast the glitch flickers.
- Copy the CSS block and paste it into your stylesheet.
- Copy the HTML snippet and use it exactly as shown — the data-text attribute must match the element's visible text for the effect to work.
Example
Input
Text: "GLITCH" · Color 1: #ff0040 (red) · Color 2: #00fff9 (cyan) · Intensity: 5pxOutput
<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }The base text stays white while its two pseudo-element copies flicker in red and cyan on either side, producing the classic corrupted-signal look.
Why the element needs a data-text attribute
The ::before and ::after pseudo-elements can't read an element's regular text content directly — CSS content: attr() only works with actual HTML attributes, not child text nodes. That's why the generated HTML repeats the text as a data-text="..." attribute on the same element: the visible text renders normally, while each pseudo-element independently pulls the same string via content: attr(data-text) and layers its own color-shifted, animated copy on top.
How the flicker is produced
Each pseudo-element is animated with its own @keyframes block that steps through a series of clip-path: inset(...) values. At each keyframe, a different horizontal band of the colored copy is revealed while the rest is clipped away, so the visible sliver of red (or cyan) jumps around vertically as the animation plays — combined with the colored text-shadow offset, this reads as torn, misaligned color channels rather than a smooth glow.
Where this effect fits
- Hero headings on gaming, cyberpunk, streaming or music-brand landing pages.
- 404 / error pages, where a glitch reinforces the 'something broke' theme.
- Hover or focus states on a heading or logo for a brief attention-grabbing accent.
- Loading or 'processing' states where a glitch conveys system activity.
- Use sparingly on body text — the effect is intentionally hard to read at a glance, so it works best on short headings or logotype, not paragraphs.
Pairing with other CSS tools
A glitch heading is often just one element in a larger dark, high-contrast layout. Combine it with a soft glow shadow or rounded card edges from the other CSS tools below for a more finished look.
Frequently Asked Questions
Why are red and cyan the default colors?
Red and cyan mimic the classic RGB channel misalignment seen in corrupted analog video and early digital signal errors, which is where the visual language of the 'glitch' effect originally comes from. You can swap in any two colors, but strongly contrasting hues read most clearly as a color split.
Does this effect require JavaScript?
No — once the CSS is on your page, the glitch is a pure CSS animation driven by @keyframes. JavaScript is only used by this tool itself, in your browser, to update the live preview and generate the copyable code.
Why doesn't the effect show up when I paste the CSS into my project?
The most common cause is a mismatched or missing data-text attribute. The pseudo-elements render whatever string is in data-text="..." on the element, not the element's own text content, so both must be set and must match exactly, including capitalization.
Can I apply this to a heading like h1 instead of a div?
Yes — the technique works on any inline or block element that accepts ::before/::after pseudo-elements and a data-text attribute. Just apply the same class and data-text attribute to your h1, span, or other element instead of a div.
Will a strong glitch effect hurt accessibility or SEO?
The underlying text content is real, selectable text, so screen readers and search engines read it normally regardless of the visual animation. For users sensitive to flashing motion, consider respecting prefers-reduced-motion by disabling or slowing the animation for those users.