Build Typewriter Effects with Pure CSS
Creating a realistic typewriter or “hacking” text animation is a staple in modern web development, particularly for tech portfolios and SaaS landing pages. Developers traditionally rely on JavaScript libraries like Typed.js to handle the character rendering. However, for a single, prominent headline, using a heavy JS library is overkill and can negatively impact your Core Web Vitals.
Our generator utilizes the brilliant CSS steps() animation timing function, combined with the ch unit, to achieve a flawless pure CSS typing effect that requires zero external scripts.
The Magic Behind the `steps()` Function
By default, CSS animations transition smoothly (e.g., linear or ease). If you animate the width of a text box smoothly, the letters will look like they are sliding out or getting cut in half. To fix this, we use the steps(N) timing function, where N is the exact number of characters in your text.
This tells the browser to animate the width of the box in exact, jerky increments (steps) instead of a smooth slide. Every “step” perfectly reveals one new character!
Why Monospace Fonts Are Recommended
Our generator calculates the width of your text using the ch CSS unit. 1 ch is equal to the exact width of the number “0” in your chosen font.
- Monospace Fonts (Courier, Fira Code): In these fonts, every single character (from ‘i’ to ‘W’) has the exact same width. This makes the
steps() calculation 100% flawless, and the cursor blinks perfectly at the edge of every letter. - Sans-Serif Fonts (Arial, Roboto): These are proportional fonts, meaning an ‘i’ is much thinner than an ‘W’. While our generator supports sans-serif fonts, the blinking cursor might occasionally jump unevenly because the
ch unit is technically inaccurate for proportional letters.
The Blinking Cursor Hack
The blinking cursor isn’t actually an HTML character. It’s simply the border-right property of the text container! We create a separate CSS animation named blink-caret that rapidly alternates the border-color from solid to transparent every 0.75 seconds.