Typing Text Animation

The typing text animation (also called a typewriter effect) reveals characters one by one, usually with a blinking cursor. Here are four practical ways to create one, from hand-written CSS to a one-click GIF export.

Pure CSS typewriter effect

For single-line text on the web, the classic CSS trick animates the element's width with steps() so letters appear as if typed, while a right border stands in for the cursor:

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.15em solid currentColor;
  width: 0;
  animation:
    typing 3s steps(11, end) forwards,
    blink 0.8s step-end infinite;
}

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

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

The number in steps(11, end) must match your character count, and the 3s duration sets the typing speed. The approach works well for heroes and headings, but multi-line text, custom fonts and exporting to a shareable file are awkward with pure CSS.

Need the effect as an image you can drop anywhere? Our typing text gif maker exports the same animation as a looping GIF.

Front-end component libraries

If you build with React or Vue, component libraries give you a ready-made typewriter effect with props for speed, cursor and looping. Framer has typing variants in its animation toolkit, MagicUI ships a dedicated TypingAnimation component, and packages like react-type-animation or typed.js (framework-agnostic) are one npm install away. These are great when the animation lives inside your own site, but they can't produce a file — anything you share outside the web page (Slack, documentation, a video edit) needs a rendered GIF or video instead.

To turn the component's look into a portable file, generate it with the free typing text gif maker and download the GIF.

Video editors

For polished, cinematic results, video editors are the traditional route. In CapCut, add a text layer and apply the built-in "Typewriter" animation, then export. In After Effects, the standard method is a Source Text keyframe expression that slices the string character by character (value.substr(0, Math.floor(time * speed))), combined with a small rectangle layer as the blinking cursor. Editors give you full control over easing, glow and camera moves — at the cost of a steep learning curve and a render/export cycle for every text tweak.

If you just need a clean typewriter loop without the timeline work, the typing text gif maker produces one in seconds.

Free online GIF maker (recommended)

For most everyday uses — chat apps, README files, social posts, documentation — a looping GIF is the most portable format, and you don't need any software to make one:

1. Enter your text — up to 200 characters with line breaks.
2. Pick style & speed — 8 open-source fonts, custom colors or a transparent background, cursor style, canvas sizes for banner/social/square/story, and five speed presets.
3. Download your GIF — rendered in your browser, free and watermark-free.

Try the typing text gif maker — it runs entirely in your browser, works on iPhone and Android, and requires no signup.