CSS Text Typing Effect Generator

What is CSS Text Typing Effect?

The CSS Text Typing Effect is a popular animation that mimics the appearance of someone typing text on a screen in real time. It’s often used for headings, banners, or interactive interfaces to add a dynamic and engaging visual element. This effect is achieved by combining CSS animations, keyframes, and sometimes pseudo-elements to simulate a cursor and the progressive display of characters.

How the Typing Effect Works

The effect is based on gradually revealing the text using CSS Animations. A blinking cursor can be created using pseudo-elements with CSS animations. By carefully timing the animation steps, it creates the illusion that the text is being typed character by character.

Basic Syntax

A simple typing effect uses keyframes to change the width of the text container from 0 to the full length:

.typing {
  width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #000;
  animation: typing 4s steps(20) 1s forwards, blink 0.7s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 20ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

Step-by-Step Explanation

width - controls how many characters are visible at each stage of the animation.
white-space: nowrap - prevents the text from wrapping to the next line.
overflow: hidden - hides the text that is not yet "typed".
border-right - creates a blinking cursor effect at the end of the text.
animation - defines the typing steps and cursor blinking timing.
steps(n) - divides the animation into discrete steps, so each character appears one by one.

Multiple Lines Typing Effect

To animate multiple lines of text sequentially, you can use multiple containers with different animation delays:

.line1 {
  width: 15ch;
  animation: typing 3s steps(15) 0s forwards, blink 0.7s step-end infinite;
}
.line2 {
  width: 25ch;
  animation: typing 4s steps(25) 3s forwards, blink 0.7s step-end infinite;
}

Infinite Typing Loop

You can create a loop effect where the text is typed and then erased repeatedly:

.typing-loop {
  width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #000;
  animation: typingErase 4s steps(20) infinite, blink 0.7s step-end infinite;
}

@keyframes typingErase {
  0% { width: 0; }
  50% { width: 20ch; }
  100% { width: 0; }
}

Customizing the Effect

Adjust the steps() value to match the number of characters in your text.
Change the animation duration to make typing faster or slower.
Modify border-right color and width to style the cursor.
Add multiple colors, shadows, or glow effects to enhance the visual appearance.
Use delays to type lines sequentially for storytelling or interactive headers.

Browser Support

The CSS typing effect works in all modern browsers that support CSS animations and keyframes, including Chrome, Firefox, Safari, Edge, and Opera. No JavaScript is required for basic typing animations, making it lightweight and easy to implement.

Conclusion

The CSS Text Typing Effect is a simple yet powerful way to add interactivity and life to your website text. By combining keyframes, steps(), and a blinking cursor, you can simulate real typing, create storytelling effects, or animate banners dynamically. Using a CSS Text Typing Effect Generator makes it easy to experiment with text length, speed, cursor style, and multiple lines without writing complex code manually.

Last update: 28. 08. 2025.