Skip to content

Glitch Text Effect

Pure CSS glitch heading with sliced cyan and magenta copies, CRT scanlines, and subtle, hover-only and acid palette variants.

Also known as: glitch effect, glitchy heading, cyberpunk text effect, distorted text animation

Pure CSS Text Effects Responsive Dark #animation #cyberpunk #glitch #heading #text-effect

Glitch Text Effect live demo

Open in new tab

Pure CSS code (HTML, CSS)

A glitch text effect made with pure CSS, no JavaScript. A big heading flickers with sliced cyan and magenta copies of itself, as if a video signal were breaking up. Below it are three smaller variants: subtle, hover only and an acid palette. It works well for game sites, tech launches, 404 pages and event banners with a cyberpunk look.

How it works

The root section.gt-stage is a dark panel with CRT scanlines, drawn by a repeating-linear-gradient on .gt-stage::after. Any element with the class .gt-glitch and a data-text attribute that repeats its text gets the effect. The ::before and ::after pseudo-elements print that text again with content: attr(data-text) and sit exactly on top of the original.

Each copy has a solid background (--gt-bg) and a colored text-shadow: cyan on the left copy, magenta on the right. The gt-slice-a and gt-slice-b keyframes change clip-path: inset() and transform in hard steps(1, end) jumps. Only a thin horizontal band of each copy shows at a time, and it covers the same band of the original text. The two copies run at different speeds, so the pattern never repeats in an obvious way. The gt-skew keyframes add a short skewX jerk to the whole element twice per cycle. The small .gt-dot in the .gt-kicker badge pulses with gt-pulse.

Customization

  • --gt-c1 and --gt-c2 on .gt-stage: the colors of the left and right copies. .gt-glitch--acid shows lime and orange.
  • --gt-speed: the length of one glitch cycle. .gt-glitch--subtle uses 4s for a calm effect, the acid variant uses 1.6s.
  • --gt-shift: how far the colored copies are offset, in em, so it scales with the font size.
  • --gt-bg: must match the color behind the text, or the slices show as visible boxes. Inside .gt-card it is set to --gt-surface.
  • Add .gt-glitch--hover to a link or button to keep it still until :hover or :focus-visible.
  • font-size in .gt-glitch: the main heading uses clamp(2.25rem, 9vw, 7rem), so it fits a phone and grows on desktop.
  • Remove .gt-stage::after to drop the scanlines, or change its gradient stops for thicker lines.

Use cases

  • Game sites: a flickering heading with cyan and magenta slices sets a retro tech mood
  • Tech launches: hero text breaks up like a video signal over CRT scanlines
  • 404 pages: a glitching error heading makes a missing page look intentional
  • Event banners: subtle, hover-only and acid variants suit different headings and links

Accessibility

The text is real, selectable HTML, and data-text is shown only by the pseudo-elements. The content: attr(data-text) / "" declaration gives the generated copies empty alternative text, so screen readers read each word once. Browsers without that syntax use the plain content line instead. The badge dot is aria-hidden. The hover link shows a pink :focus-visible outline and glitches on keyboard focus as well. With prefers-reduced-motion: reduce all animations stop, and one frozen, still-readable glitch frame stays on screen. White text on the near-black stage has a contrast ratio well above 15:1.

Usage notes

Keep data-text in sync with the visible text, including case, or the copies will not line up. Avoid using the effect on long paragraphs, because constant flicker makes body text tiring to read.

Glitch Text Effect at a glance

Framework
Pure CSS
Code
HTML, CSS
JavaScript
Not needed, CSS only
Dependencies
None
Layout
Responsive, works on mobile, dark design
Category
Text Effects
License
Free for personal and commercial use

Questions about this template

Can I use the Glitch Text Effect code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

There is nothing to install. Paste the HTML where the component should appear and add the CSS to your stylesheet. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. It is built with HTML and CSS only, so there is no JavaScript to load.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

No dependencies. Pure HTML, CSS and JavaScript.

Glitch Text Effect – Pure CSS text effects component screenshot
Glitch Text Effect · Pure CSS Text Effects

More Text Effects

Animated Gradient Text – Pure CSS text effects preview

Animated Gradient Text

Pure CSS animated gradient text for headings using background-clip, with four palettes, a shine sweep variant, a CSS-only pause switch and a fallback color.

Pure CSS Text Effects
Typing Text Effect – Pure CSS text effects preview

Typing Text Effect

Pure CSS typewriter effect with a blinking caret, using steps() and ch units on a monospace headline and a retro terminal window with replay.

Pure CSS Text Effects