piapia123
en

CSS Glitch Text Effect

Styling

Everything runs locally in your browser — nothing is uploaded

Live previewChange any option above and this updates at once
CSS

The effect looks arcane but the construction is direct: render the same text three times — the original plus two offset, tinted copies — then use `clip-path` so each shows only bands, and let those bands jump over time. Together that reads as an unstable signal. ⚠️ The delivered code carries one HTML-side requirement: the copies come from pseudo-elements using `content: attr(data-text)`, so the element must also carry `data-text="the same text"`. Without it the copies are empty — and that looks like "the effect did not work", pointing nowhere near the HTML. The page says so explicitly. Intensity is three steps rather than a continuous value because the ratio between "how far they offset" and "when they jump" is what makes the look; each step has its three or four numbers balanced so you do not have to. The hardest step tears visibly and suits headings and 404 pages; the softest reads as an occasional flicker and will not grate in normal content. This is a use-once effect: it grabs attention, and things that keep grabbing attention become irritating. So do not cover a page with it or leave it running — the code includes a `prefers-reduced-motion` fallback.

Features

  • Three intensity steps: an occasional twitch, a steady jitter, heavy tearing
  • Adjustable copy colours, defaulting to cyan and magenta (chromatic aberration)
  • The preview loops; hover to pause so you can study a frame
  • Type to preview — the tool provides a text input
  • The output includes the full CSS plus the `data-text` HTML requirement
  • A `prefers-reduced-motion` fallback is included automatically
  • The animation name carries a random suffix, so it cannot collide with yours
  • Syntax-highlighted code with a one-click copy button
  • Everything is computed in your browser

How to use

  1. Type a word in the box above
  2. Pick an intensity: heavy suits a heading, soft suits an accent in normal content
  3. Adjust the two copy colours — more separation tears harder
  4. Copy the code, and add the matching `data-text` attribute to the element

FAQ

Why are the copies empty after I paste the code?
Because the `data-text` attribute is missing. The two copies come from `content: attr(data-text)` — they read that attribute, not the element’s text content. So the markup must be `<div class="glitch" data-text="the same text">the same text</div>`, both parts matching. The preview sets this for you; in your own project you add it yourself. It is the one place this pure-CSS effect needs HTML to cooperate.
Why `clip-path` rather than actually tearing the image?
Because CSS has no tearing operation — what it has is clipping. So the approach inverts: prepare offset copies first, then show each one through only a few horizontal bands (`clip-path: polygon(...)`), and move those bands over time. The eye sees "some horizontal strips are out of register" and reads it as signal failure. That is the approximation CSS allows, and it is how this effect is universally built on the web.
How does this affect accessibility?
It is the least accessibility-friendly effect in this set, for three reasons. The text is permanently jittering, which makes it hard to read — never use it for body copy. Rapid flicker is a risk for photosensitive users (in severe cases it can trigger seizures), which the included `prefers-reduced-motion` rule addresses. And it inevitably grabs attention, which is distracting next to other content. So: headings, 404 pages, games-adjacent interfaces only, and do not leave it running.

Related tools

Neon Text

Styling

Adjust colour and intensity, preview the neon glow live and copy the CSS, with layered text-shadows on a dark backdrop.

CSS Keyframe Animations

Styling

Seven keyframe presets — fade, slide, pop, pulse, shake, spin, float — with duration and easing, plus a reduced-motion fallback.

CSS Transition

Styling

Choose the property, duration, easing and delay, hover to preview the transition and copy the CSS. Transition and :hover stay separate in the output.

CSS Gradient Generator

Styling

Adjust the angle, colours and shape, preview the gradient live, copy the CSS. Linear, radial and conic, with an optional middle stop.

CSS Border Radius

Styling

Set each corner radius, preview it live and copy the CSS. px, rem or percent — and the preview shows why a percentage gives an ellipse.

Glassmorphism Generator

Styling

Adjust blur, opacity, saturation and border, preview the glassmorphism live and copy the CSS, -webkit- prefix included so it works on iOS.

← Back to all tools