CSS Text Reveal Animations

46 CSS text reveal and entrance animations: masked slide-ups, clip-path wipes, letter-by-letter and word-by-word reveals for headlines.

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

Highlighter Sweep

A translucent highlighter stroke draws in behind the words after a short delay, as if someone marked the important line. Plays once, then stays.

reveal · one-shot · subtle

Fade In Up Text

The text rises a little as it fades in. The most useful entrance animation there is: quiet, quick, and appropriate for headings, captions and anything that appears on load.

reveal · one-shot · subtle

Blur In

The text comes into focus from a heavy blur. A filter transition that feels like a camera pulling focus; keep it under a second or it reads as slow.

reveal · one-shot

Tracking In

Letters start spread far apart and slide together as they fade in. Animating letter-spacing gives it a cinematic title-card feel.

reveal · one-shot · cinematic

Letters Rise

Each letter rises and fades in a beat after the previous one. Every span carries its index in a custom property, so the delay is one calc() and adding letters needs no new CSS.

reveal · one-shot · letters

Letters Pop In

Letters pop in from nothing with a springy overshoot, one after another. The overshoot comes from a cubic-bezier that goes past 1, so no keyframe juggling is needed.

reveal · one-shot · letters · playful

Flip In

The line swings down into place from a 90-degree tilt, with perspective. Set the transform origin to the top so it hinges like a sign being lowered.

reveal · one-shot · 3d

Pop In

The whole word scales up from half size with a little overshoot, like a notification badge appearing. One keyframe and a springy easing curve.

reveal · one-shot · playful

Wipe Reveal

The text is uncovered from left to right, as if a curtain were drawn back. A clip-path inset animation, so the text never moves; only what you can see of it changes.

reveal · one-shot · cinematic

Block Swipe Reveal

A solid bar in the accent color sweeps across, and the text is there when it passes. Two animations: the bar scales in from the left then out to the right, and the text appears mid-sweep.

reveal · one-shot · cinematic

Line Mask Reveal

Each line slides up out of an invisible mask, one after another, the way editorial sites reveal headlines. Every line is a clipping wrapper around a moving inner span.

reveal · one-shot · cinematic

Rotating Words

One word in a sentence cycles through alternatives, each sliding up to replace the last. The list ends with a repeat of the first word so the loop closes without a jump.

loop · reveal

Word by Word Text Animation

Each word slides up out of its own hidden slot, tilted slightly, one after another. Every word is an overflow: hidden wrapper around a moving span, so the edge stays crisp.

reveal · words · cinematic · one-shot

Bouncing Letters Text Animation

Letters fall in from above one at a time, squash on landing and bounce twice before they settle. Each keyframe carries its own easing, so the fall speeds up like real gravity.

reveal · letters · playful · one-shot

Split Text Reveal Effect

The top half of the word slides in from the left and the bottom half from the right, meeting in the middle. Two clipped pseudo-element copies, then the real text takes over.

reveal · cinematic · one-shot

Reveal From Center Text Effect

A thin line grows at the center, splits in two, and the lines slide outward pulling the text open behind them. A clip-path inset and two border lines share one easing curve.

reveal · cinematic · one-shot

Rubber Stamp Text Effect

A bordered, tilted label slams down from above like a rubber stamp, shudders on impact and leaves a ring of ink that spreads and fades. Good for approvals, badges and sold-out tags.

reveal · playful · one-shot

Spotlight Text Reveal

The text waits as a faint ghost until a soft spotlight sweeps across it, then the light widens to show the whole line. Two mask layers: a radial spot and a low-alpha fill for the ghost.

reveal · cinematic · one-shot

Scattered Letters Assemble Effect

Letters start scattered and spun around the card, then fly home into a tidy line. Each span carries its own start offset and angle in custom properties, so one keyframe drives them all.

reveal · letters · playful · one-shot

Stacking Words Text Animation

Three words drop in from above and stack up, bottom first. Each lands with a squash, and the words underneath dip under the weight, using the separate translate and scale properties.

reveal · words · playful · one-shot

Light Sweep Text Reveal

A band of light crosses the empty line and leaves the text lit behind it. One gradient clipped to the text: solid, a pale highlight, then transparent, moved with background-position.

reveal · shine · one-shot

Fade In Left to Right Text

The line fades in from left to right behind a soft, feathered edge instead of a hard wipe. A gradient mask wider than the text slides across, so there is no clip line to see.

reveal · subtle · one-shot

Speed Slide In Text Effect

The text rushes in from the left leaning forward, trailing faint copies of itself, then brakes past its spot and rocks back upright. The trail is three text-shadows that collapse to zero.

reveal · playful · one-shot

Circle Reveal Text Effect

An iris opens from the center of the word while the text settles from slightly zoomed in. One clip-path circle that grows from 0% to past the corners, plus a small scale on the same element.

reveal · cinematic · one-shot

Swing In Letters Text Effect

Each letter drops in hanging from its top edge and swings back and forth like a sign on a hook, losing a little each pass. A damped pendulum written as alternating ease-in-out keyframes.

reveal · letters · playful · one-shot

Text Rise From Underline Effect

An underline draws itself first, then the text rises out from behind it with a small overshoot. The wrapper's overflow: hidden ends at the line, so the text appears to come out of it.

reveal · subtle · one-shot

Radial Wipe Text Reveal

A thin arm pivots from the bottom center like a windshield wiper, uncovering the text as it sweeps from left to right. A conic-gradient mask whose angle is a registered @property.

reveal · cinematic · one-shot

Letters Rotate In Text Effect

Each letter swings up into place around its bottom-left corner like a hinged gate, tipping slightly past vertical before it settles. The overshoot comes from a cubic-bezier above 1.

reveal · letters · playful · one-shot

Letter by Letter Blur In Text

Letters sharpen out of a blur one after another, so a wave of focus travels across the word. Unlike a whole-line blur in, the long overlap between letters gives a soft gradient of focus.

reveal · letters · blur · subtle · one-shot

Zipper Letters Text Animation

Odd letters drop in from above and even letters rise from below, closing left to right like a zipper. The direction comes from an nth-child custom property that one keyframe reads.

reveal · letters · playful · one-shot

Letters Zoom In Text Effect

Each letter rushes in from several times its size, blurred, and snaps into place with an expo ease-out. Reads like the letters are flying at the screen and landing on the page, one by one.

reveal · letters · blur · cinematic · one-shot

Reverse Stagger Text Animation

Letters slide in from the left starting with the last one, so the word builds from its end back to its start and each letter bumps into its neighbour. The delay counts down from --n.

reveal · letters · one-shot

Random Letter Reveal Text

The word sits as a faint ghost while its letters switch on in a shuffled order, each with a small pop. The order lives in a --d index on every span, so any permutation works.

reveal · letters · subtle · one-shot

Glow In Text Effect

Letters switch on one by one as bright, glowing shapes, then cool down to the plain text color as the bloom fades. The glow is a two-layer text-shadow that shrinks to nothing.

reveal · letters · glow · one-shot

Letters Spread From Center Effect

All the letters appear stacked on one spot in the middle, then fan out to their places like a deck of cards. Each offset is worked out in calc() from the letter's index and the count.

reveal · letters · playful · one-shot

Growing Letters Text Animation

Letters grow up out of the baseline one after another, stretching a little too tall and then settling with a squash. Only scale changes, from a bottom transform-origin, so layout never moves.

reveal · letters · playful · one-shot

Words Slide Together Text Effect

The first word slides in from the left and the second from the right, they collide in the middle with a squash and a small spark, then bounce apart and settle. Two keyframes, mirrored.

reveal · words · playful · one-shot

Diagonal Wipe Text Reveal

A slanted edge sweeps across the line while the text inside drifts the other way, so the reveal has depth. A clip-path polygon on the wrapper and a small translate on the text.

reveal · cinematic · one-shot

Venetian Blinds Text Reveal

The text opens behind horizontal slats, like venetian blinds tilting open. A repeating gradient mask whose stop is a registered @property, animated from 0% to 100% of each slat.

reveal · retro · one-shot

Halftone Dot Text Reveal

Each letter prints in as a halftone: a grid of tiny dots that swell until they merge into solid type, letter by letter. A radial-gradient mask tile whose dot radius is a registered @property.

reveal · letters · retro · one-shot

Unfold Text Animation

A line draws across the middle, then the text unfolds out of it vertically with a little overshoot, like an old TV warming up. The line is a pseudo-element; the text only animates scaleY.

reveal · retro · one-shot

Elastic Stretch Text Animation

The word snaps out from its left edge like a tape measure, overstretches, and wobbles back to size. Width and height trade off at each keyframe so the text keeps its volume.

reveal · playful · one-shot

Block Reveal Rotating Text

A solid bar in the accent color sweeps over the word, the word changes while it is hidden, and the bar pulls away to the right. Editorial and punchy; the bar flips its transform-origin mid-sweep.

loop · words · cinematic · reveal

Decrypt Text Effect

Each character spins through random symbols, then locks onto the real letter with a flash, left to right with a little jitter. The symbols are an animated content value on a pseudo-element.

letters · reveal · one-shot

Glitch Reveal Text

The word stutters into existence through torn slices and color-split flashes, then settles perfectly clean and stays. Plays once; clip-path slices do the tearing, two copies do the color split.

glitch · reveal · one-shot

How to use these text reveal 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.