30 Tailwind CSS Text Hover Effects

The gradient demos paint a gradient on the element, then punch the text through it. You give the heading a background with bg-gradient-to-r, add bg-clip-text so the paint only shows inside the glyph shapes, and set text-transparent so the real letters stop covering it. The crossfade in demo 03 keeps a solid ink layer on top and fades it out to reveal the gradient underneath, rather than animating the gradient in from nothing. The bug that bites everyone: forgetting text-transparent (or leaving a text-white on the element) — the clip still runs, but the opaque letters sit over it, so you see solid text and swear the clip failed. The animated rainbow in demo 21 moves a 200%-wide background with background-position; animating the colour stops themselves does nothing.

Each letter is its own element carrying an inline style="--i:N" custom property, and the shared transition reads that index to offset its delay — letter 0 fires first, letter 5 fires 5 * 40ms later, giving the wave in demos 10 and 19. That means you must split the word into one span per character by hand or in a loop; a single text node has nothing to stagger. Keep the wrapper as the hover target, not each letter, or the wave restarts whenever the cursor crosses a gap between glyphs. Render spaces as their own non-animated spans so the word still wraps naturally. The elastic demo 19 pairs the delay with a springy cubic-bezier and recolours per letter; the smoke demo 23 reads a per-letter --tth23-d for drift distance so no two letters leave on the same path.

Two things to check. First, anything that runs forever or moves a lot — the marquee in demo 26, the neon flicker in 07, the rainbow slide in 21 — should still under Tailwind's motion-reduce: variant; set motion-reduce:animate-none and give it a readable resting state. Second, never hide meaning behind hover alone. The spoiler in demo 12 and the tooltip in demo 28 are built on a real <button>, so they open on focus and on Enter or Space, not just pointer hover — a keyboard or touch user can still reach them. Purely decorative effects like the 3D pop or the gold shimmer are fine hover-only, because the text is already fully readable at rest. The reduced-motion and focus rules only bite when the hover either moves continuously or reveals content the user actually needs.

Keep them on headings, nav labels, wordmarks and CTAs — short, large, deliberately-hovered type. Do not apply them to body copy or long paragraphs. bg-clip-text with text-transparent removes the real text colour, which weakens contrast at paragraph sizes; the hollow stroke state in demo 16 is worse, outlined letters are hard to read as running text. Per-letter effects — waves, scramble, rubber band — need every character wrapped in a span, which bloats the DOM and breaks selection and copy/paste over a sentence. The cursor-driven ones — magnetic 14, spotlight 11, dynamic shadow 25 — run a pointer handler on every move; one hero is fine, a page full of them is not. And hover does nothing on touch screens, so never let an effect be the only way to reach real information.

The glitch in demo 06 stacks three copies of the same string. The base element holds the real text; two pseudo-elements, before: and after:, pull the same string from a data-text attribute with before:content-[attr(data-text)], so you never retype the words in markup. Each clone is tinted — one cyan, one magenta — offset a few pixels, and masked with a clip-path that jumps between keyframes, so slices of the clones flash out of register for the chromatic-aberration look. The thing that trips people: the data-text attribute must actually be present on the element, or both pseudo-elements render empty and you get a plain title with no glitch. The clones live in pseudo-elements, so screen readers only announce the single base string and never read the effect twice.

The outline-to-fill demos (02 and 16) put both a stroke and a fill on one element using [-webkit-text-stroke:2px_currentColor] plus a transparent or coloured fill. The catch is that -webkit-text-stroke is not an animatable property — you cannot ease the stroke width, and flipping text-transparent to a solid colour snaps rather than eases. So the fill is faked: demo 02 slides a filled layer up behind the hollow one like water rising, and demo 16 crossfades a solid-coloured duplicate over the outlined base. Support is wide but still vendor-prefixed, so always ship the -webkit-text-stroke form; there is no unprefixed version in general use. Give the hollow resting state a bold or heavy face, or thin strokes thin out and vanish on low-DPI screens.

Most of the collection is pure CSS — the perspective tilt in demo 22, for instance, fakes cursor tracking with four invisible quadrant hover zones and needs no script at all. JavaScript appears only where the effect must read the live cursor position or rewrite the text. The magnetic pills in demo 14 write the pointer's offset into --x and --y custom properties so the element leans toward the cursor; the spotlight in 11 and the dynamic shadow in 25 do the same from a pointermove handler. The scramble in demo 17 swaps random glyphs on a timer and locks them left to right, which no static CSS can do. When you copy one of those, keep the handler light — update a custom property and let CSS paint, rather than writing style.transform every frame — and bind the listener to the element, not the whole document, so idle hovers cost nothing.

The tooltip in demo 28 uses no script. Each term is a real <button> and the bubble is a sibling revealed with group-state utilities — group-hover: and group-focus: on the wrapper flip the bubble from opacity-0 to opacity-100. Because the trigger is a button, the tip appears on keyboard focus as well as hover, which a plain <div> trigger cannot do. Point the term at its bubble with aria-describedby so assistive tech announces the definition when the control is focused, and keep the bubble in the DOM dimmed rather than at display:none, so that association stays live. Position it absolute inside a relative wrapper, and let it flip above or below near an edge, or the first row of a glossary clips its tip against the top of the card.