TEXT EFFECTS

Typing Text Effect

A clean typing animation with a blinking cursor effect for headings, hero sections, and creative text highlights.

Build Something Amazing
HTML
<div class="typing-text-wrap">
  <span class="typing-text">Build Something Amazing</span>
</div>
CSS
.typing-text-wrap{
  display:inline-block;
}

.typing-text{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  width:0;
  color:#ffffff;
  font-size:48px;
  font-weight:800;
  line-height:1.2;
  border-right:3px solid #22d3ee;

  animation:
    typingText 3.5s steps(23, end) infinite alternate,
    typingCursor .7s step-end infinite;
}

@keyframes typingText{
  from{
    width:0;
  }

  to{
    width:23ch;
  }
}

@keyframes typingCursor{
  0%,
  100%{
    border-color:transparent;
  }

  50%{
    border-color:#22d3ee;
  }
}

How This Typing Text Effect Works

The Typing Text Effect creates a character-by-character animation by gradually increasing the visible width of the text while keeping the remaining content hidden.

The .typing-text element starts with width: 0, while overflow: hidden and white-space: nowrap keep the unrevealed characters outside the visible area.

The typingText animation increases the width from 0 to 23ch. Because the text contains 23 characters, including spaces, the full phrase becomes visible at the end of the typing sequence.

The steps(23, end) timing function divides the 3.5s animation into 23 distinct steps, making the text appear one character at a time instead of expanding smoothly. You can learn more about creating stepped CSS animations in the MDN Web Docs guide to steps().

A 3px cyan right border acts as the typing cursor. The separate typingCursor animation changes its border color between transparent and #22d3ee every .7s, creating the blinking effect.

The typing animation uses infinite alternate, so after the complete phrase appears, the same sequence runs in reverse and gradually deletes the text before typing it again.

Customizing This Typing Text Effect

You can customize the Typing Text Effect by changing the text length, animation speed, cursor style, and typography.

  • Text content: Replace Build Something Amazing with your own phrase.
  • Character count: Update both steps(23, end) and width: 23ch to match the new text length.
  • Typing speed: Change 3.5s for faster or slower typing.
  • Cursor color: Replace #22d3ee with another accent color.
  • Cursor thickness: Adjust the 3px value in border-right.
  • Cursor speed: Change .7s to control how quickly the cursor blinks.
  • Text size: Adjust 48px to suit your layout.

Where to Use This Typing Text Effect

The Typing Text Effect works well for short messages where a character-by-character animation can draw attention without making the interface overly complex.

  • Hero sections: Animate taglines or short introductory messages.
  • Developer portfolios: Display skills, roles, or creative statements.
  • Landing pages: Highlight product messages or important phrases.
  • Personal websites: Add animated introductions or short descriptions.
  • Technology websites: Create a terminal-inspired typing appearance.
  • Creative interfaces: Add subtle movement to important text elements.

Because the effect uses CSS width animation, steps(), overflow, and keyframes, both the typing and blinking cursor animations work without JavaScript.

If you want a more distorted digital typography style, check out the Glitch Text Effect, which uses layered colors and clipped sections to create animated distortion.

Frequently Asked Questions

Does the Typing Text Effect require JavaScript?
No. The typing and blinking cursor animations are created entirely with CSS.

Why does the effect use steps()?
The steps() timing function divides the animation into separate stages, making the text appear one character at a time instead of revealing smoothly.

How do I use a different phrase?
Replace the text in the HTML and update both steps(23, end) and width: 23ch to match the new character count.

Can I change the typing and cursor speeds separately?
Yes. Change the 3.5s duration for the typing animation and .7s for the blinking cursor animation.

The Typing Text Effect combines stepped width animation, hidden overflow, and a blinking cursor to create a familiar typing experience. Its CSS-only structure keeps it lightweight and easy to customize for hero sections, developer portfolios, landing pages, personal websites, and modern interfaces.

Scroll to Top