TextToolboxTextToolbox
Home/Text to Visual / Effects/Typewriter Effect Generator

Typewriter Effect Generator

Animate text with a realistic typewriter effect. Control typing speed, cursor style, colors, loop, and delete-effect. Generates pure CSS @keyframes code for your website.

⌨️ Typewriter Settings

Fast (20ms)Slow (250ms)

👁️ Live Preview

|Click Play to start the typewriter animation...

💬 Sample Texts

📋 Pure CSS Typewriter Code

.typewriter {
  overflow: hidden;
  border-right: 2px solid #14b8a6;
  white-space: nowrap;
  animation:
    typing 3.4s steps(57, end),
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to   { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50%      { border-color: #14b8a6; }
}

The steps() value and animation duration are computed from your current text length and speed setting.

Recommended Tools

Hacker Terminal TyperShadow Text GeneratorGradient Text GeneratorStylish Text to Image GeneratorRainbow Text GeneratorDiagonal Text GeneratorWavy Text GeneratorUnicode Text Generator

What Is the Typewriter Effect Generator?

The Typewriter Effect Generator animates your text character-by-character in a realistic typewriter style using recursive setTimeout calls. After each character is appended to the displayed string (text.slice(0, charIdx + 1)), the next call is scheduled after speed milliseconds. The cursor blinks independently via a setInterval at 530ms. Control typing speed (20–250ms per character), cursor style (bar, block, underscore), font, colors, loop behavior, and optionally add a delete effect. The tool also generates a pure CSS @keyframes implementation with the correct steps() value derived from your text length.

How to Use the Typewriter Effect Generator

  1. Enter your text — or pick one of the 5 sample quotes.
  2. Set typing speed — 20ms is very fast; 60ms is realistic; 150ms is slow and dramatic.
  3. Choose cursor style and font — classic bar (|), filled block (█), underscore (_), or no cursor. Pick from 6 font families.
  4. Toggle Loop and Delete Effect — Loop restarts the animation; Delete Effect types the text then erases it before looping.
  5. Click Play — use Pause to freeze mid-animation and Resume to continue from where it stopped.
  6. Copy CSS — use the generated keyframe code (with correct steps() count) on your own website.

Where Can You Use a Typewriter Effect?

SaaS Landing Pages

The loop + delete pattern — type a tagline, erase it, type the next — is the most common hero section pattern on modern SaaS sites.

Personal Portfolio Sites

Animate your job title or skills in the hero section to show multiple roles without cluttering the layout.

Blog Post Headers

Use the CSS version on a single static headline for a subtle, attention-grabbing entrance animation on page load.

Loading & Onboarding Screens

A typewriter message during loading ("Setting up your workspace...") makes wait times feel intentional rather than broken.

Cursor Styles and Animation Modes Available

  • Bar cursor (|) — classic vertical line; most recognizable as a text cursor.
  • Block cursor (█) — filled rectangle; retro terminal style.
  • Underscore cursor (_) — horizontal line; classic command-line aesthetic.
  • No cursor — clean output with no cursor element.
  • Loop mode — restarts the animation after a configurable pause (default 1500ms).
  • Delete effect — types to completion, pauses, then erases character-by-character at 60% typing speed before looping.
  • Pause / Resume — freezes the animation mid-text and resumes from the exact character position.

Best Practices and Limitations

  • CSS version is single-line only: The CSS width: 0 → 100% approach requires white-space: nowrap and works only for short, single-line strings. For multi-line text, use the JavaScript approach this tool demonstrates.
  • Steps value is now auto-computed: The generated CSS uses steps(N) where N matches your exact text length — the animation duration is also derived from your speed setting so both values stay in sync.
  • Cursor contrast: If your cursor color matches the background, the cursor becomes invisible. Use the Cursor Color picker to ensure sufficient contrast against the Background Color.
  • Performance on long text: The JavaScript implementation handles text of any length cleanly via setTimeout recursion. The CSS version is impractical beyond ~80 characters since the step count would require precise matching.

Share This Tool

Help developers create beautiful typewriter animations for free!

Frequently Asked Questions

How does the typewriter animation work in JavaScript?+

The JavaScript implementation uses recursive setTimeout calls. After each character is added to the displayed string (text.slice(0, charIdx + 1)), the next character is scheduled after the speed interval in milliseconds. The cursor blinks independently via a separate setInterval at 530ms. This approach handles multi-line text and special characters that the CSS approach cannot.

How does the pure CSS typewriter effect work?+

The CSS approach uses two @keyframes animations simultaneously: "typing" animates the element's width from 0 to 100% with a step-based timing function, and "blink-caret" toggles the right border color on and off. The steps() function ensures the text appears character-by-character by moving the clipping edge in discrete steps matching the character count.

What is the delete effect?+

When Delete Effect is enabled, the animation first types all characters normally, then pauses for the configured pause duration (default 1500ms), then erases characters in reverse at 60% of the typing speed. If Loop is also enabled, the sequence repeats indefinitely: type → wait → delete → wait → type again.

How many characters per second does the speed setting control?+

The speed slider sets milliseconds per character. At 20ms, approximately 50 characters per second are typed. At 60ms (realistic typing), about 16 characters per second. At 150ms, about 7 characters per second (slow, dramatic). At 250ms, about 4 characters per second. Average professional typing speed is around 60–80ms per character.

Does the CSS typewriter code work for multi-line text?+

The CSS-only version requires white-space: nowrap and works best for single-line strings. The steps(40) value should match your text character count. For multi-line or variable text, use the JavaScript approach shown in this tool's preview. Multi-line CSS typewriter effects require more complex JavaScript or library-based solutions.