CSS Typing Animations

32 CSS typing and typewriter effects: single and multi-line typing, type-and-delete loops, terminal commands, code typing and blinking carets.

Typewriter Effect

Text types itself out one character at a time behind a blinking caret. Pure CSS: the width steps up one character per frame using ch units, so set the step count to your text's length.

typing · reveal · one-shot

Type and Delete Loop

Types the phrase, pauses, deletes it and starts again, forever. Uses the same ch-based width trick with an alternating animation, so no JavaScript is needed for the delete phase.

typing · loop

Text with Blinking Cursor

A static line of text followed by a block cursor that blinks, as at a terminal prompt. Pairs with any typing effect, or stands alone as a 'waiting for input' cue.

typing · loop · minimal

Terminal Typing Effect

A small terminal window types a command, prints two lines of output, then drops to a fresh prompt with a blinking block cursor. The command types with steps() in ch units.

typing · retro · one-shot

Multi-line Typewriter Effect

Three lines type one after another, and the caret hops down to each new line when the last one is done. Each line carries its length and start time as custom properties.

typing · one-shot

Code Typing Animation

Three lines of syntax-colored JavaScript type into a small dark editor with line numbers, while the active-line highlight follows along. Colored tokens are spans inside each clipped line.

typing · colorful · one-shot

AI Code Autocomplete Animation

A function signature types in, a faint ghost suggestion appears below it with a Tab hint, then the key is pressed and the suggestion turns into real code. Good for AI coding tool pages.

typing · subtle · one-shot

Typo and Backspace Typing Effect

Types a word wrong, a red spellcheck squiggle appears, the caret backspaces over the mistake and types it again correctly. Three clipped spans share one caret, all pure CSS.

typing · playful · one-shot

Typewriter Effect with Pauses

Types like a person thinking: quick bursts, slow dots, a beat before the last word. Each segment of the keyframes has its own steps() count, and the caret only blinks during pauses.

typing · subtle · one-shot

Typewriter Effect for Any Font

A typewriter for proportional fonts: each letter is a span that appears on its own beat, and the caret rides on whichever letter was typed last. Shown here as a serif pull quote.

typing · letters · one-shot

Smooth Caret Typing Effect

Letters appear per keystroke while the caret glides to its new spot instead of jumping, then blinks with a soft fade, like a code editor with smooth caret on. Two animations make the glide.

typing · subtle · one-shot

AI Streaming Text Effect

An AI answer streams in word by word, each word resolving from a soft accent glow, with a pulsing dot at the end of the stream that fades once the reply is complete.

typing · words · blur · one-shot

Typewriter Carriage Return Effect

Like a real typewriter, the paper slides left one character per keystroke, then the carriage returns and feeds a new line. The paper's transform uses the same steps() as the typing.

typing · retro · one-shot

Chat Bubble Typing Animation

A chat bubble pops in with three bouncing dots, then stretches open and the message fades in where the dots were. The bubble grows with an animated clip-path, so nothing reflows.

typing · playful · one-shot

AI Prompt Typing Animation

A prompt types itself into an AI input box, then the send button lights up in the accent color with a small pop. Letters are spans with staggered delays, so any font works.

typing · letters · one-shot

Search Placeholder Typing Effect

A search field that types example queries into its placeholder, deletes each one and moves to the next. Three stacked phrases share one caret that sits after whichever is showing.

typing · loop · subtle

Vintage Typewriter Text

Each letter strikes the page with a little thump and ink spread, and lands slightly off its baseline like an old machine with worn typebars. Uneven rhythm and inking come from nth-child.

typing · retro · letters · one-shot

Sticky Note Typing Animation

A reminder types itself onto a tilted sticky note with ruled lines and a strip of tape. The count of letter delays runs across both lines, so the second line starts right where the first ends.

typing · playful · letters · one-shot

Command Palette Typing Animation

A query types into a command palette and the results re-rank as you watch: the match slides to the top, lights up and shows its highlighted term, the rest dim. Rows move with transforms only.

typing · highlight · one-shot

URL Bar Typing Animation

Three letters type into a browser address bar, the rest of the address appears as a highlighted inline suggestion, then Enter accepts it and a thin loading bar runs along the bottom.

typing · highlight · one-shot

OTP Code Input Animation

Six code boxes fill one digit at a time while the focus ring and caret step from box to box, then a small wave marks the code as complete. Each box reads its index from --i.

typing · numbers · one-shot

Password Typing Animation

Each character shows for a moment and then turns into a dot, the way phone keyboards mask passwords, while a strength meter fills and its label climbs from Weak to Strong.

typing · letters · one-shot

Character Counter Typing Effect

A commit message types in while a counter and a small progress ring keep count, tick for tick. One registered integer drives the counter text, the ring and the steps() typing together.

typing · numbers · one-shot

Terminal Boot Sequence Text

Status lines print one after another like a machine booting, each with a green-lit OK in your accent color, ending on a login prompt with a blinking underscore cursor.

typing · retro · one-shot

Scrolling Terminal Log Text

A live server log that never stops: each new request types in on the bottom row, then the feed scrolls up a line. The first rows repeat at the end, so the 4.5s loop has no seam.

typing · retro · loop

Receipt Printing Animation

A receipt feeds out of a printer slot in short jerky steps, torn edge first, like a thermal printer. The paper is a transformed block under an overflow clip, so the text never reflows.

typing · retro · one-shot

Select and Retype Typing Effect

Types a phrase, selects it with a highlight that sweeps back right to left, deletes it and types the next one, forever. Both phrases share one set of keyframes, offset by a delay.

typing · highlight · letters · loop

Typing Test Text Effect

The whole sentence waits in faint gray while typed characters light up over it and the caret steps along, like a typing speed test, then the result slides in underneath.

typing · subtle · one-shot

Mention Chip Typing Effect

Typing @maya opens a small suggestion menu, then the name snaps into an accent-colored chip and typing carries on. The chip is a background plus a spread shadow, so the text never shifts.

typing · highlight · playful · one-shot

Glowing Typewriter Text

Letters arrive white hot, glowing in the accent color, and cool down to solid color a moment later, so the newest letters always burn brightest and the typing head leaves a fading trail.

typing · glow · letters · one-shot

Someone Is Typing Text

The chat status line with three bouncing dots after a name. The dots use the same bounce curve as Tailwind's animate-bounce, staggered with negative delays so they ripple from the first frame.

typing · subtle · loop · tailwind

Strikethrough Typing Effect

Types a claim, pauses, strikes through the wrong word and types the right one after it, a copywriting move for hero lines. The strike is a scaled line; the retyped word picks up the accent.

typing · playful · letters · one-shot

How to use these typing animations

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required. Classes are prefixed per effect so several can share a page.

To change the color, set --txt-color on the element or any ancestor. To change the size, set --txt-size: offsets, shadows and letter spacing are all in em, so they follow the font size.

One-shot effects such as the typewriter and the reveals play when the element appears. To trigger them later, add the class when you need it, or toggle animation-play-state.

Every snippet ships with a prefers-reduced-motion rule that jumps straight to the finished state for people who asked their OS for less motion, so the text is always readable.