How does a typing animation work without any JavaScript?

The text sits in a container with white-space: nowrap, overflow: hidden, and a fixed width, and a steps() animation grows that width from 0 to 100% in one jump per character rather than smoothly — steps() is what makes it look like discrete keystrokes instead of a wipe.

Why does the number of steps matter?

The steps() value should match your text's character count, since each step reveals roughly one more character — this tool counts your text automatically and bakes the right number into the generated animation, so you don't have to recompute it by hand if you edit the copy.

How does the blinking caret work?

A border-right acts as the caret, and a separate keyframes animation toggles that border's color between visible and transparent on a steady interval, running independently of the typing animation so it keeps blinking even after typing finishes.

Can it loop and delete the text too, in pure CSS?

Yes, in Loop mode — the same width animation adds a hold at 100% then reverses back to 0%, all within one keyframes block and one infinite animation, so it types, pauses, deletes, and pauses again on a fixed cycle. What CSS alone can't do is cycle through several different phrases — that needs a little JavaScript to swap the text mid-animation.

Does this work with variable-width fonts?

It needs a monospace font to look clean. Each step reveals another 1ch of width — the width of the '0' character — and in a true monospace font every glyph shares that same width, so each step lands exactly on a letter's edge; in a proportional font, narrower or wider letters like 'i' or 'W' don't match that width, so the steps drift out of sync and a sliver of the next letter can peek through mid-step. This generator always sets a monospace font stack on the typewriter element for that reason — keep it monospace if you swap in your own font.

CSS TYPEWRITER EFFECT GENERATOR

Type out live text with a pure-CSS steps() animation and a blinking caret, then copy the CSS.

Hello, world!

Your text

Animation

Typing duration: 3s

Caret blink: 0.75s

Font size: 32px

Caret color

Loop (type, pause, delete, repeat)

Presets

HTML

<h2 class="typewriter">Hello, world!</h2>

CSS

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 32px;
  border-right: 0.1em solid #ff6a35;
  animation: typewritertool-typing 3s steps(13, end) forwards, typewritertool-blink-caret 0.75s step-end infinite;
}

@keyframes typewritertool-typing {
  from { width: 0; }
  to { width: 13ch; }
}

@keyframes typewritertool-blink-caret {
  50% { border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter {
    animation: none;
    width: 13ch;
  }
}

How to build a CSS typewriter effect

1
Type the text you want to animate.
2
Pick a preset or set the typing duration and caret color.
3
Choose whether it types once or loops with a type-pause-delete cycle.
4
Adjust the caret blink speed.
5
Copy the HTML and CSS — the step count is matched to your text's character length automatically.

Questions

How does a typing animation work without any JavaScript?: The text sits in a container with white-space: nowrap, overflow: hidden, and a fixed width, and a steps() animation grows that width from 0 to 100% in one jump per character rather than smoothly — steps() is what makes it look like discrete keystrokes instead of a wipe.
Why does the number of steps matter?: The steps() value should match your text's character count, since each step reveals roughly one more character — this tool counts your text automatically and bakes the right number into the generated animation, so you don't have to recompute it by hand if you edit the copy.
How does the blinking caret work?: A border-right acts as the caret, and a separate keyframes animation toggles that border's color between visible and transparent on a steady interval, running independently of the typing animation so it keeps blinking even after typing finishes.
Can it loop and delete the text too, in pure CSS?: Yes, in Loop mode — the same width animation adds a hold at 100% then reverses back to 0%, all within one keyframes block and one infinite animation, so it types, pauses, deletes, and pauses again on a fixed cycle. What CSS alone can't do is cycle through several different phrases — that needs a little JavaScript to swap the text mid-animation.
Does this work with variable-width fonts?: It needs a monospace font to look clean. Each step reveals another 1ch of width — the width of the '0' character — and in a true monospace font every glyph shares that same width, so each step lands exactly on a letter's edge; in a proportional font, narrower or wider letters like 'i' or 'W' don't match that width, so the steps drift out of sync and a sliver of the next letter can peek through mid-step. This generator always sets a monospace font stack on the typewriter element for that reason — keep it monospace if you swap in your own font.