CSS Glitch Text

Build a pure CSS glitch text effect on your device with live preview. Set the words, intensity, speed, and channel colors, then copy HTML and CSS for headlines or hero banners.

PrivateIn your browserInstantUnlimited

Text

Intensity (4px)

Speed (2.5s)

Base text color

Channel A color

Channel B color

Preview background

Preview

GLITCH

The animation loops continuously. Copy the snippet when intensity and colors feel right for your layout.

HTML and CSS

/* HTML */
<p class="easy24-glitch" data-text="GLITCH">GLITCH</p>

/* CSS */
.easy24-glitch {
  position: relative;
  display: inline-block;
  margin: 0;
  color: #eef1f6;
  font-size: clamp(2rem, 8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  user-select: none;
}

.easy24-glitch::before,
.easy24-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

.easy24-glitch::before {
  left: 4px;
  text-shadow: -4px 0 #00fff9;
  animation: easy24-glitch-a 2.5s infinite linear alternate-reverse;
  clip-path: inset(0 0 58% 0);
}

.easy24-glitch::after {
  left: -4px;
  text-shadow: 4px 0 #ff003c;
  animation: easy24-glitch-b 2.75s infinite linear alternate-reverse;
  clip-path: inset(42% 0 0 0);
}

@keyframes easy24-glitch-a {
  0% { clip-path: inset(20% 0 60% 0); transform: translate(0); }
  20% { clip-path: inset(60% 0 10% 0); transform: translate(-2px, 2px); }
  40% { clip-path: inset(10% 0 50% 0); transform: translate(4px, -2px); }
  60% { clip-path: inset(40% 0 30% 0); transform: translate(-4px, 4px); }
  80% { clip-path: inset(70% 0 5% 0); transform: translate(2px, 0); }
  100% { clip-path: inset(15% 0 55% 0); transform: translate(0); }
}

@keyframes easy24-glitch-b {
  0% { clip-path: inset(65% 0 10% 0); transform: translate(0); }
  25% { clip-path: inset(10% 0 55% 0); transform: translate(4px, -2px); }
  50% { clip-path: inset(45% 0 20% 0); transform: translate(-2px, 4px); }
  75% { clip-path: inset(5% 0 70% 0); transform: translate(2px, 2px); }
  100% { clip-path: inset(50% 0 15% 0); transform: translate(0); }
}

HTML only

<p class="easy24-glitch" data-text="GLITCH">GLITCH</p>

Paste the HTML and CSS into your page. The effect needs a relatively positioned host and works best on short uppercase headlines.

How it works

Enter the headline text

Type up to 32 characters. Short words and acronyms read more clearly once the RGB split and clip animation start moving.

Tune intensity, speed, and colors

Raise intensity for a stronger offset, change speed for a slower or faster loop, and set base plus channel colors. The preview updates as you edit.

Copy or download the snippet

Copy the combined HTML and CSS, grab HTML alone, or download glitch.css. Everything runs in this tab.

What is CSS Glitch Text?

CSS Glitch Text helps you design a cyberpunk style headline without hunting through random snippets. You get a small HTML and CSS pair with honest limits: it is a decorative motion effect, not a full video glitch pipeline, and it stays clearest on short text over dark backgrounds.

Why use this tool

Generate a pure CSS glitch headline with live animation preview.
Control intensity, loop speed, base color, and two channel colors.
Start from five curated color and motion presets.
Escape text safely into the HTML data attribute and markup.
Copy HTML and CSS together or take the HTML markup alone.
Use the tool as often as you like. There is no daily free plan cap.

Questions

What does CSS Glitch Text do?

It builds HTML and CSS for an animated glitch headline that splits color channels and clips layers over time. You preview the motion and paste the snippet into your project.

Does it need JavaScript?

No. The motion is CSS keyframes and pseudo elements only. You do not need a runtime script for the effect itself.

Why keep the text short?

Large multi line sentences can look muddy once layers shift. Short titles, logos, and single words keep the glitch readable.

Will it work on every browser?

Modern browsers support clip path and the animations used here. Older browsers may show only the static base text without the split layers.

Can I change the font?

Yes. After you paste the CSS, set font family on .easy24-glitch to match your brand typeface.

Is there a daily limit?

No. This tool has no daily usage cap on the free plan.

If Easy24 helped, buy a coffee

Tools stay free. A one-time tip is optional and helps keep them running.

Buy a coffee

Similar Developer tools

See all

JSON Formatter

Developer

Pretty-print, minify, validate, and sort JSON keys in the browser. Choose 2- or 4-space indent, import a file, download the result.

Open

Meta Tag Generator

Developer

Build SEO title, description, Open Graph, Twitter Card, and canonical tags with a live social preview. Runs in the browser.

Open

CSS Gradient Generator

Developer

Design linear and radial CSS gradients with up to three color stops. Live preview, presets, hex input, copy or download.

Open