Home/Tools/Effects/Glitch Text Effect

Effects · Generator

Glitch Text Effect

Create animated CSS glitch text effects with custom colors, speed, and intensity.

Glitch Settings

Text

Font Size48px

Animation Speed1s

Glitch Intensity4

Primary Color

Glitch Color 1

Glitch Color 2

Preview

GLITCH

HTML required: Add data-text="YOUR TEXT" attribute to the element for the pseudo-element content.

Generated CSS

@keyframes glitch-clip1 {
  0%   { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0); }
  50%  { clip-path: inset(40% 0 40% 0); transform: translate(4px, 0); }
  100% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0); }
}
@keyframes glitch-clip2 {
  0%   { clip-path: inset(65% 0 10% 0); transform: translate(4px, 0); }
  50%  { clip-path: inset(75% 0 5% 0); transform: translate(-4px, 0); }
  100% { clip-path: inset(65% 0 10% 0); transform: translate(4px, 0); }
}

.glitch-text {
  position: relative;
  color: #ffffff;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  color: #ff0055;
  animation: glitch-clip1 1s infinite linear;
  mix-blend-mode: screen;
}

.glitch-text::after {
  color: #00ffc8;
  animation: glitch-clip2 0.7s infinite linear;
  mix-blend-mode: screen;
}

/* HTML: <span class="glitch-text" data-text="GLITCH">GLITCH</span> */

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Glitch Text Generator?

Generate CSS glitch text effects using pseudo-elements and clip-path animations. Preview the effect and copy the complete CSS and HTML.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Glitch Text Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Enter your glitch text

Type the text to glitch. The data-text attribute on the element must match this text for the pseudo-element technique to work.

Set glitch colours and intensity

Pick the two offset colours (typically complementary or split-complementary to the base colour). Adjust animation speed and offset distance.

Copy CSS and HTML

Click Copy to get the CSS (with @keyframes and pseudo-element rules) and the HTML with the data-text attribute.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

.glitch {
  position: relative;
  color: white;
  font-size: 3rem;
  font-weight: 900;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
}
.glitch::before {
  left: 2px;
  color: #f97316;
  animation: glitch1 2s infinite linear;
}
.glitch::after {
  left: -2px;
  color: #6C2EF5;
  animation: glitch2 2s infinite linear;
}
@keyframes glitch1 {
  0%, 95% { clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); }
  96%      { clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%); }
  100%     { clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); }
}

The data-text attribute on the HTML element must match the visible text exactly for the pseudo-element content to align.

Pro tips

Pro tips for better results

★

Keep glitch effects brief and infrequent

A glitch animation that runs continuously is distracting. A 2-4 second interval with a short burst (0.1-0.2s glitch, then pause) is more effective than constant motion.

★

Always include prefers-reduced-motion override

Glitch effects involve rapid movement and colour flickering. This is a strong trigger for vestibular disorders and photosensitivity. Always disable them for reduced-motion preferences.

★

Use dark backgrounds for best effect

Glitch effects with neon colours read clearly on dark backgrounds. On white or light backgrounds, the effect is subtle and often looks broken.

FAQ

Frequently asked questions

It depends on intensity and duration. Rapidly flickering content can trigger seizures in users with photosensitive epilepsy (WCAG 2.3.1). Always add @media (prefers-reduced-motion: reduce) { .glitch::before, .glitch::after { animation: none; } }.

No. Everything runs in your browser. Nothing is sent to a server.