---
title: "CSS Text Animations: Typewriter, Gradient & Glitch"
description: "Seven free CSS text animations with live previews: typewriter, gradient text, letter wave, glitch, neon flicker, and focus blur. Pure CSS, copy-paste ready."
url: https://frontendhelpers.com/css-text-animations
updated: 2026-10-12
---

# CSS text animations

Typewriter, flowing gradient text, letter waves, glitch and neon flicker — headline effects built entirely in CSS.

## The code for all 7 text effects, explained

Every effect above, with the markup to use and the complete CSS. Each one is self-contained: paste the CSS once, add the class, done.

### Typewriter

steps(13) matches the 13 characters of “Hello, world.” — change both the ch width and step count to match your own text.

Markup

```html
<span class="fh-typewriter">Hello, world.</span>
```

CSS

```css
.fh-typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-family: monospace;
  border-right: 2px solid currentColor;
  width: 13ch;
  animation:
    fh-typing 2.2s steps(13) both,
    fh-caret 0.7s step-end infinite;
}
@keyframes fh-typing {
  from { width: 0; }
  to   { width: 13ch; }
}
@keyframes fh-caret {
  50% { border-color: transparent; }
}
```

### Gradient Flow

A gradient endlessly flowing through the letters. background-clip: text does the masking; the 300% size gives it room to travel.

Markup

```html
<h1 class="fh-text-gradient">Your headline</h1>
```

CSS

```css
.fh-text-gradient {
  background: linear-gradient(90deg,
    #8b5cf6, #06b6d4, #10b981, #8b5cf6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fh-gradientFlow 4s linear infinite;
}
@keyframes fh-gradientFlow {
  to { background-position: 300% 0; }
}
```

### Letter Wave

Each letter sits in its own span with a staggered delay. Add more nth-child rules for longer words.

Markup

```html
<span class="fh-text-wave">
  <span>W</span><span>A</span><span>V</span><span>E</span>
</span>
```

CSS

```css
.fh-text-wave span {
  display: inline-block;
  animation: fh-wave 1.4s ease-in-out infinite;
}
.fh-text-wave span:nth-child(2) { animation-delay: 0.1s; }
.fh-text-wave span:nth-child(3) { animation-delay: 0.2s; }
.fh-text-wave span:nth-child(4) { animation-delay: 0.3s; }
.fh-text-wave span:nth-child(5) { animation-delay: 0.4s; }
.fh-text-wave span:nth-child(6) { animation-delay: 0.5s; }
@keyframes fh-wave {
  0%, 40%, 100% { transform: translateY(0); }
  20%           { transform: translateY(-10px); }
}
```

### Glitch

The element needs a data-text attribute matching its content — the pseudo-elements clone it into the offset colour layers.

Markup

```html
<span class="fh-glitch" data-text="GLITCH">GLITCH</span>
```

CSS

```css
.fh-glitch {
  position: relative;
  animation: fh-glitchSkew 2.5s infinite;
}
.fh-glitch::before,
.fh-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
}
.fh-glitch::before {
  color: #06b6d4;
  clip-path: inset(0 0 55% 0);
  animation: fh-glitchTop 2.5s infinite;
}
.fh-glitch::after {
  color: #ef4444;
  clip-path: inset(45% 0 0 0);
  animation: fh-glitchBottom 2.5s infinite;
}
@keyframes fh-glitchSkew {
  0%, 90%, 100% { transform: skewX(0); }
  92% { transform: skewX(4deg); }
  94% { transform: skewX(-4deg); }
  96% { transform: skewX(2deg); }
}
@keyframes fh-glitchTop {
  0%, 88%, 100% { transform: translate(0); }
  90% { transform: translate(-4px, -2px); }
  94% { transform: translate(4px, 1px); }
}
@keyframes fh-glitchBottom {
  0%, 88%, 100% { transform: translate(0); }
  90% { transform: translate(4px, 2px); }
  94% { transform: translate(-4px, -1px); }
}
```

### Neon Flicker

Stacked text-shadows build the glow; the flicker comes from brief opacity dips at irregular intervals, like a failing tube.

Markup

```html
<span class="fh-neon">OPEN</span>
```

CSS

```css
.fh-neon {
  color: #f8fafc;
  text-shadow:
    0 0 6px #06b6d4,
    0 0 12px #06b6d4,
    0 0 24px #06b6d4,
    0 0 48px #0891b2;
  animation: fh-neonFlicker 2.4s linear infinite;
}
@keyframes fh-neonFlicker {
  0%, 18%, 22%, 26%, 100% { opacity: 1; }
  20%, 24% { opacity: 0.45; }
  60%      { opacity: 0.92; }
}
```

### Tracking In

Letters contract from wide spacing into place — a favourite for cinematic hero titles.

Markup

```html
<h1 class="fh-tracking-in">Your title</h1>
```

CSS

```css
.fh-tracking-in {
  animation: fh-trackingIn 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@keyframes fh-trackingIn {
  from { letter-spacing: 0.6em; opacity: 0; }
  to   { letter-spacing: normal; opacity: 1; }
}
```

### Focus In

Text sharpens from a blur, like a camera pulling focus. Heavier than transform-based effects — use it on headings, not paragraphs.

Markup

```html
<h2 class="fh-text-focus">Your heading</h2>
```

CSS

```css
.fh-text-focus {
  animation: fh-textFocus 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes fh-textFocus {
  from { filter: blur(10px); opacity: 0; }
  to   { filter: blur(0);    opacity: 1; }
}
```

## Where text effects belong

Animated text is powerful precisely because it's unusual, which makes restraint the whole skill. One animated headline in a hero section reads as craft; animated text throughout a page reads as a template. These effects belong on headlines, hero statements and single focal words — never on body copy, which people need to actually read.

The gradient-flow and neon effects suit brand moments and landing pages. Typewriter fits terminal aesthetics and developer-facing products. Glitch works for cyberpunk and gaming contexts and looks out of place almost everywhere else.

## The techniques behind them

**Gradient text** works by painting a gradient as the element's background, clipping it to the glyph shapes with `background-clip: text`, and making the text itself transparent. Animating `background-position` across an oversized gradient produces the flow.

**Typewriter** combines two tricks: a `steps()` timing function animating `width` so characters appear discretely rather than sliding, and a blinking border-right acting as the caret. Because it depends on character count, the `ch` width and step count must both match your text.

**Letter effects** like the wave need each character in its own element with a staggered delay — the one case here where a little JavaScript to split the text is worth it.

## Accessibility rules for animated text

Three constraints matter. Text that moves or flashes must be avoidable — WCAG requires a way to pause or stop anything that animates for more than five seconds, which is why looping text effects should be reserved for short headlines and paused under `prefers-reduced-motion`.

Flashing is a genuine safety issue: nothing should flash more than three times per second, as faster rates can trigger photosensitive seizures. The neon flicker here stays well under that threshold deliberately.

Finally, keep the text as real text. Effects that split characters into spans should preserve the readable string for screen readers, and gradient text needs a fallback colour so it isn't invisible where `background-clip` is unsupported.

## Frequently asked questions

### How do I make gradient text in CSS?

Apply the gradient as a background, clip it to the letterforms with background-clip: text, and set the text colour to transparent. Include the -webkit- prefixed properties, and set a fallback colour for unsupported browsers.

### Why does my typewriter animation cut off the text?

The ch width and the steps() count must both match your text length. If the width is too small the text truncates; if the step count is wrong the characters appear unevenly.

### Are animated text effects bad for accessibility?

They can be. WCAG requires a way to stop anything animating longer than five seconds, and nothing should flash more than three times per second. Keep looping effects to short headlines and disable them under prefers-reduced-motion.

## Related categories

- [Animated Gradient Text in CSS (and Keeping It Readable)](https://frontendhelpers.com/css-animated-gradient-text): Animate gradient text with background-clip and @property, then keep it readable: contrast at every stop, forced colours, selection and reduced motion.
 
- [CSS Typewriter Effect: Pure CSS Typing Animation](https://frontendhelpers.com/css-typewriter-effect): Build a pure CSS typewriter effect with steps() and ch: blinking caret, type-and-delete loop, multiple lines, monospace caveats and reduced motion.
 
- [Entrances](https://frontendhelpers.com/css-entrance-animations): Fades, slides and zooms for arriving content
 
- [Attention](https://frontendhelpers.com/css-attention-animations): Pulses, shakes and celebration effects
 
- [Ambient](https://frontendhelpers.com/css-background-animations): Floating, gradient pans and morphing blobs