Pure CSS typewriter

CSS Typing Effect Generator

Configure a typewriter text animation with a blinking cursor — pure CSS, no JavaScript required — then copy the code.

Ready-to-use HTML + CSS

How it works

1

Type your text

Enter the exact line you want typed out on screen.

2

Set duration and cursor

Choose how long typing takes and whether the cursor blinks.

3

Copy the CSS

Get a self-contained snippet using steps() and a monospace font.

FAQ

Does this typing effect need JavaScript?

No. It uses a pure CSS animation on the width property with the steps() timing function, combined with a monospace font, to simulate characters appearing one at a time.

Why does the text need to be monospace?

The steps() animation reveals a fixed number of equal-width increments. A monospace font keeps every character the same width, so each step reveals exactly one character.

Can I loop the animation?

Yes, turn on looping to repeat the typing animation indefinitely with a short pause between cycles.

Try other tools

MQCSS Marquee GeneratorSeamless scrolling text strip. GLTCSS Glitch Text GeneratorAnimated glitch text effects. NEONCSS Neon Text GeneratorGlowing neon text effects.