AI CSS Animations

CSS Animated Gradient Text

33 animated gradient text in CSS: moving gradients, rainbow and aurora text, metallic gold and chrome shines, all built with background-clip: text.

Animated Gradient Text

A gradient flows through the letters, clipped to the text. The second and third colors are mixed from your accent, so changing one variable retints the whole gradient.

gradient · loop · tailwind

Rainbow Text

A full-spectrum rainbow cycles through the text. Fixed colors rather than your accent, on purpose: this one is for playful moments, not brand moments.

gradient · loop · colorful

Shimmer Text

A bright band sweeps across otherwise muted text, like light on brushed metal. The same idea AI chat apps use for their 'Thinking' status line.

shine · loop · subtle

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

Gold Text Effect

Banded metallic gold letters with a warm sheen that rolls across every few seconds. Fixed gold stops rather than your accent, plus a dark bronze drop shadow so it reads on light pages.

shine · loop · gradient

Chrome Text Effect

Polished silver lettering with a hard horizon line, the classic chrome look. The horizon glides up and down as if the letters were tilting under a sky tinted with your accent.

shine · loop · retro

Holographic Foil Text

Rainbow foil bands and a white glare slide across the letters at different speeds, like tilting a holographic sticker. Two layers on one alternating animation give the parallax.

gradient · shine · loop · colorful

Fire Text Effect

Flame tongues rise through red and orange letters while a blurred orange glow flickers behind them. The fill is tiled radial gradients moving up; the glow only animates transform and opacity.

gradient · glow · loop · colorful

Aurora Text Effect

Teal, green and violet bands drift through the letters while a pink veil drifts the other way, like the northern lights. Each layer is an em-sized tile that loops by exactly one tile.

gradient · loop · colorful

Sparkle Text Effect

Four-point stars pop and spin over a gradient word, one after another, like a magic label. Each star is a clip-path shape with its own position and negative delay set inline.

shine · loop · playful

Liquid Metal Text Effect

Silver letters with soft bright and dark reflections that slide and merge like mercury. Three radial blobs wander over a banded steel gradient, with a faint accent tint in the highlights.

shine · loop

Gradient Shadow Text

Solid text in the page color sits on an offset copy filled with a flowing gradient, like a two-color screen print. The copy is a pseudo-element read from a data attribute.

gradient · loop · retro

Glossy Shine Text

A crisp double streak of light flashes diagonally across glossy letters, then rests. Unlike a soft shimmer the text stays full color, and the pause keeps it from feeling busy.

shine · loop

Gradient Glow Text

A flowing gradient headline with a soft halo made of the same colors, so the glow changes hue under each letter as the colors travel. The halo is a blurred copy on the same keyframe.

gradient · glow · loop

Galaxy Text Effect

Letters filled with a violet nebula tinted by your accent while three layers of stars drift past at different speeds. The parallax comes from tiled dot layers, each moving whole tiles.

gradient · loop · colorful

Conic Gradient Text

A conic gradient turns inside the letters, so the colors sweep around the word like a slow radar. The angle is a registered @property, which is what lets a gradient animate at all.

gradient · loop · colorful

Candy Stripe Text

Diagonal stripes in your accent and a pale tint roll through heavy letters like a barber pole. The stripes are one small tile, the same trick as striped progress bars, moved by one tile.

gradient · loop · playful

Two-Tone Split Text

A slanted line divides the word into your accent and the page's text color, and slides back and forth. One hard-stop gradient, with currentColor as the second tone so it suits both themes.

gradient · loop · subtle

Mesh Gradient Text

Four soft color blobs wander inside the letters and blend like a mesh gradient. Each blob is a radial-gradient layer, and one keyframe moves all four along different paths.

gradient · loop · colorful

Pastel Rainbow Text

Six pastel bands rise through chunky letters like a scrolling rainbow flag, with a dusky drop shadow so the pale colors still read on white. The band stack is one tile that loops.

gradient · loop · colorful · playful

Ice Text Effect

Faceted, icy blue letters with sharp white refractions that slide across as if the block were turning in the light. Hard color stops make the facets; a dark edge keeps them crisp.

shine · loop

Lava Text Effect

Glowing molten letters with dark crust drifting across them in two layers, so cracks of bright orange open and close. Crust patches are tiled radial gradients moving in opposite directions.

gradient · glow · loop

Sunset Gradient Text

Warm amber letters slowly turn pink, then dusky violet, while a glowing sun sinks below the baseline, and back again. A tall vertical gradient slides up and down behind the text.

gradient · loop · colorful

Glass Text Effect

Tinted, see-through letters with a bright rim, a glossy top and a reflection that drifts across as they tilt. The tint is a translucent accent, and they cast a soft colored shadow.

shine · loop · subtle

Ripple Gradient Text

Rings of color spread outward from the middle of the word without end. A registered length property offsets every stop of a repeating radial gradient by exactly one ring per cycle.

gradient · loop

Gradient Loading Text

A gradient pours into faint letters from the left, holds, then drains out to the right, over and over. Half of an oversized layer is transparent, so one position animation does both halves.

gradient · loop

Staggered Letter Shine Text

A glint runs through each letter in turn and lifts it a hair, so the light seems to skip along the word. Every span has its own clipped gradient, delayed by its index.

shine · loop · letters

Pearlescent Text Effect

Satin letters tinted pink, lilac and aqua, with a soft round sheen gliding over them like light on a pearl. The pastel stops are mixed with your accent so they hold up on white.

shine · gradient · loop · subtle

Ocean Text Effect

Deep sea-blue letters with rings of light crossing inside them, like sun on shallow water. Two tiled layers of soft elliptical rings drift in opposite directions over a depth gradient.

gradient · loop · subtle

Iridescent Text Effect

An oil-slick sheen where every color shifts in place, without the gradient ever moving. It is one static gradient under a hue-rotate filter that turns a full circle.

gradient · loop · colorful

Glitter Text Effect

Fine white and gold flecks twinkle across a pink and accent gradient, like glitter catching the light. Three sparse dot layers jump between offsets with steps(), so the grains blink rather than slide.

shine · loop · playful

Color Morph Gradient Text

The two ends of a gradient fade between colors in place instead of sliding. Each end is a registered color property with its own keyframe, half a cycle apart, so the blend keeps changing.

gradient · loop · subtle

Gradient Pulse Text

A white-hot glow blooms out from the middle of the word in a quick double beat, then fades back to the accent. The bloom is a radial gradient whose radius is a registered percentage.

gradient · loop

How to use these gradient text

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.