CSS Typing Effect – Create a Typewriter Animation with Pure CSS

Follow for more stuff

The typing effect simulates a typewriter. Characters appear one by one while a caret blinks at the end. You can build it with pure CSS using width animation and a border based cursor.

What we are building

We create a headline or short sentence that types itself. The caret blinks to reinforce the illusion. No JavaScript is required. The trick is a masked line that grows from 0 to the full text width.

Core CSS

Use two animations. The first controls the reveal using steps. The second toggles the caret visibility.

.typing-text{
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid crimson;
  animation: typing 4s steps(22, end) infinite, blink .75s step-end infinite;
}

@keyframes typing{
  from{ width: 0 }
  to{ width: 22ch }
}

@keyframes blink{
  from, to{ border-color: transparent }
  50%{ border-color: crimson }
}

How it works

The text is in a single line and clipped by overflow: hidden.
The width grows from 0 to a fixed number of characters using ch units.
The steps(N, end) timing creates a discrete jump for each character.
The caret is just border-right that turns on and off in the blink animation.

Customization tips

Change the text length by updating the number in steps and in to{ width: Nch }.
Adjust speed with the duration of the typing animation.
Swap the caret color by editing border-right and the blink keyframes.
For multiple phrases, duplicate the element and stagger durations.

Accessibility notes

Keep sentences short so users can read them easily. If motion is an issue, respect reduced motion preferences.

@media (prefers-reduced-motion: reduce){
  .typing-text{ animation: none; border-right: 0 }
}

Wrap-up

A clean typing effect needs only CSS. Animate width in steps for the characters. Blink the caret with a simple keyframe. The result is light, readable, and perfect for hero sections and callouts.