Make your text type itself. With pure CSS.
How it works
- overflow: hidden hides the unrevealed text.
- white-space: nowrap keeps everything on one line.
- Animate width from 0 to 100% with @keyframes typing.
- Use steps(n) to reveal characters one by one. Set n close to the character count for a crisp tick.
- A 1px border-right acts as the caret. A second animation toggles its color to “blink”.
- Add animation-fill-mode: forwards so the text stays visible at the end.
Practical tips
- Prefer a monospace font for perfectly even steps, or tune the steps() value if letters have different widths.
- If the string changes, update the steps() count.
- Respect users with @media (prefers-reduced-motion: reduce) to disable or simplify the effect.
The best part? It’s supported by almost 96% of browsers!
Would you use this in a hero, headline, or code sample?
To learn more tips about CSS, make sure to join my newsletter below ❤️