30 CSS Text Hover Effects

#csstexthoveranimation #motion #css+js #css-only

30 hand-coded CSS text hover effect demos: 4-variant animated underlines, text fill + liquid fill, text-color reveal, strike-through, text swap / flip up, glitch RGB-split, neon flicker, gold shimmer, 3D pop, letter-wave stagger, cursor-tracked spotlight mask, spoiler reveal, blur-to-focus, magnetic pull, letter-spacing expansion, stroke-fill, scramble / matrix, border trace, rubber-band bounce, variable font-weight shift, oklch rainbow flow, perspective tilt, smoke dissolve, fire glow, cursor-vector text-shadow, marquee speed-up, riso duotone, tooltip reveal, SVG ripple, mask clip-path wipe. 25 Pure CSS + 5 tiny JS. Every effect fires on :hover AND :focus-visible so keyboard users get parity (WCAG 2.1.1). Scoped under .cth-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.

30 light JSPublished Aug 3, 2026

01 / 30CSS only

CSS Animated Underline on Hover

The four underline animations every navbar ships in 2026, side by side: grow left→right, bloom from center, slide-through (the line exits the far side instead of retreating), and the pure text-decoration version that needs no pseudo-element at all. The first three are one background-image gradient sized from 0%→100% — cheaper than ::after, works on inline links that wrap — and the fourth animates text-decoration-color, thickness and underline-offset directly, which finally transitions in every modern engine.

PublishedAug 3, 2026

02 / 30CSS only

CSS Text Fill / Liquid Fill Effect

A headline that fills with water on hover — pure CSS, no canvas, no SVG library. Two stacked copies of the word: the base is a hollow 1px text-stroke, the overlay is gradient-filled via background-clip:text and revealed bottom-up by a clip-path driven by ONE registered @property, so the browser tweens the water level for you. While hovered, a 3s keyframe rocks the clip's wave crest so the surface never sits still. Below it, the classic nav-pill variant fills its background bottom-to-top with nothing but background-size.

PublishedAug 3, 2026

03 / 30CSS only

CSS Text Color Reveal / Background Clip

Solid ink to vivid gradient on hover — with a real crossfade, not the usual hard swap. The trick nobody writes down: keep the gradient painted underneath at all times via background-clip:text, and transition the element's COLOR to transparent — the glyph's solid fill dissolves and the gradient was waiting behind it. Once revealed, two registered @property angles keep the gradient slowly turning, so the text feels lit, not printed. Shown on a SaaS feature index where each heading carries its own --from/--to pair.

PublishedAug 3, 2026

04 / 30CSS only

CSS Strike-Through Hover Effect

text-decoration:line-through cannot animate — so every animated strike you've admired is a scaleX'd pseudo-element, and this demo ships the three that matter: an e-commerce compare-at price whose old number gets crossed out as you hover the buy row, a task list where :has(:checked) draws a persistent strike the moment the checkbox ticks, and a sold-out nav link whose line enters left and exits right. The line is currentColor-independent, em-scaled, and slightly rotated so it reads as a pencil stroke, not a border.

PublishedAug 3, 2026

05 / 30CSS only

Text Swap / Flip Up Effect

Nav links that swap languages on hover — English slides up and out, Japanese slides in from below, in a clipped two-storey elevator built from one absolute span and translateY. Next to it, the rolodex version: the same swap performed as a real 3D flip, two faces mounted on an invisible prism rotating around rotateX. Both keep exactly one label in the accessibility tree; the decorative twin is aria-hidden, so screen readers hear 'Works', never 'Works 作品'.

PublishedAug 3, 2026

06 / 30CSS only

Glitch Text Effect

The cyberpunk staple, engineered instead of copy-pasted: two full clones of the headline live in ::before/::after via content:attr(data-text) — zero extra markup, zero extra words for screen readers — offset ±2px into red and cyan, and shredded by clip-path inset() slices that jump on a steps() timeline. At rest the sign is calm with one hairline of chromatic aberration; hover detonates it. All transform/clip/opacity — no layout, no repaint storms — and reduced-motion users get the aberration without the seizure-bait strobing.

PublishedAug 3, 2026

07 / 30CSS only

Neon Glow / Flicker Text Effect

A bar sign that ignites on hover: five stacked text-shadows build the tube glow (white-hot core, tight halo, wide bloom), a steps(1) keyframe sputters through the power-on like real gas catching, and one letter — the W, obviously — stays faulty, buzzing on its own clock even after ignition. Off-state isn't invisible: the tubes read as dim glass, the honest resting state of a real sign. Everything is color + text-shadow, so the markup is one anchor and the words stay words.

PublishedAug 3, 2026

08 / 30CSS only

Shimmer / Metallic Shine Effect

Gold you can grade: a members-card wordmark set in a five-stop metallic gradient (shadow gold → base → near-white highlight band → base → shadow) clipped into the glyphs, with the light sweep done by sliding background-position across a 250%-wide canvas on hover — the gradient never changes, the LIGHT moves. The eyebrow line runs a slow 6s ambient shimmer so the card glints even untouched, the way foil does under ceiling light; the big mark saves its full sweep for your cursor.

PublishedAug 3, 2026

09 / 30CSS only

3D Pop / Lift Effect

Type that physically leaves the page: hover lifts the headline up and left while a six-layer text-shadow staircase extrudes beneath it and a soft blurred shadow falls further away — the full lighting story of an object gaining altitude. The trick that makes it GLIDE instead of snap is the one nobody documents: shadow lists only interpolate when both states have the SAME number of layers, so the resting state declares all seven shadows at zero offset. Includes the pressed state (:active drops it back down) because a pop without a press feels broken.

PublishedAug 3, 2026

10 / 30CSS only

Split Letter / Staggered Wave Effect

Hover the wordmark and the letters take off one by one — a wave built from transition-delay:calc(var(--i)*45ms), which is the professional choice over keyframes for one huge reason: transitions are REVERSIBLE, so when the cursor leaves mid-wave the letters settle back in the same stagger instead of snapping to frame zero. Letters are pre-split in the HTML with an index custom property each (no JS splitter), aria-hidden as a group, with the real word on the parent for screen readers and find-in-page.

PublishedAug 3, 2026

11 / 30CSS + 12-line JS

Mask / Spotlight Text Reveal

A torch beam through typography: the headline exists twice in one element's layers — dim outlined glyphs everyone sees, and a photograph clipped inside the letters (background-clip:text) that only shows where a radial-gradient mask says so. Twelve lines of JS feed the cursor into --x/--y; a registered @property tweens the beam's radius from 0 up on entry, so the light blooms instead of popping. No JS? The beam still opens dead-center on hover. Keyboard? :focus-visible floods the whole image. Everyone gets a version.

PublishedAug 3, 2026

12 / 30CSS only

Reveal Hidden Text / Spoiler Reveal

The spoiler pattern done properly — three affordances layered on one blur: HOVER peeks at the answer while the cursor stays (mouse users), a real CHECKBOX pins it revealed (touch and keyboard users — hover-only spoilers are broken on phones), and a 'reveal all' master switch flips the whole card via :has() with staggered delays. While hidden, user-select:none stops copy-paste cheating and a REVEALS-ON chip tells users the row is interactive. Pure CSS; the checkbox is genuine form state you could persist.

PublishedAug 3, 2026

13 / 30CSS only

Blur to Focus Text Effect

A photographer's index that behaves like a lens: at rest every essay title is crisp; the moment the list is hovered, everything EXCEPT the current line falls out of focus — blur(4px), dimmed, slightly smaller — and your line stays tack sharp. It's the depth-of-field metaphor applied to a menu, done with one selector pair (.list:hover .item:not(:hover)) and mirrored for keyboards with :has(:focus-visible). Underneath, the inverse classic: a single redacted-feeling line that starts blurred and resolves on approach.

PublishedAug 3, 2026

14 / 30CSS + 22-line JS

Magnetic / Cursor-Tracking Text

The Awwwards handshake: links that lean toward your cursor while it's near, with the label inside drifting a beat further than its pill — two-layer parallax that makes the element feel soft. The physics is split honestly between languages: 22 lines of JS do the measuring (pointer offset from center × pull strength, written to --mx/--my), and CSS does ALL the moving — a short ease during tracking, and on release a long overshooting bezier snaps everything home like elastic. Keyboard users get a focus ring and working links; the magnetism is pointer-only garnish by design.

PublishedAug 3, 2026

15 / 30CSS only

Letter Spacing Expansion (Tracking / Kerning)

The fashion-magazine exhale: an uppercase masthead whose tracking breathes from .14em to .46em on hover, pulling air between the capitals. The bug every implementation ships — letter-spacing adds a phantom space AFTER the last letter, so 'centered' text drifts left as it expands — is fixed here with the one-line compensation (margin-right equal to minus the current spacing) transitioned in lockstep. Nav links do the restrained version, and the section number does the inverse: it TIGHTENS on hover, which reads as focus.

PublishedAug 3, 2026

16 / 30CSS only

Typography Outline / Stroke Fill

Hollow type that pours full on hover — and it's ONE element, no duplicate layers: the glyphs are transparent with a 1.5px -webkit-text-stroke, and the fill is a background-image clipped to the text whose background-size grows 0%→100% from the baseline up. Because stroke and fill are separate paint channels on the same glyphs, they never misalign by a subpixel the way stacked-copy builds do. The wordmark fills bottom-up like poured metal; the nav links fill left-to-right like a gauge; the stroke itself warms color mid-pour.

PublishedAug 3, 2026

17 / 30CSS + 22-line JS

Typography Scramble / Matrix Effect

Labels that decrypt under the cursor: on hover, every character cycles through random glyphs, then resolves to the real text left-to-right like a codebreaker locking digits. The 22-line engine is the honest minimum — original strings cached in data-text, one interval per element, resolve speed proportional to position — and the CSS does the part JS versions always botch: monospace + a min-width in ch units, so the row NEVER changes width mid-scramble. Phosphor-green security-console styling included, as the search intent demands.

PublishedAug 3, 2026

18 / 30CSS only

Animated Border / Encased Text Hover

Two grades of 'the text draws a box around itself': the TRACE — two corner pseudo-elements whose width and height tween in sequence, so a hairline visibly runs around the CTA clockwise, corner meeting corner — and the ORBIT — a conic-gradient ring rotating behind a padded inner panel, its angle driven by a registered @property so a comet of light laps the button under the cursor. Trace for editorial ghost buttons, orbit for the glowing tech CTA; both are markup you already have plus pseudo-elements.

PublishedAug 3, 2026

19 / 30CSS only

Elastic / Rubber Band Bounce

Letters made of gum: hovering the wordmark fires a squash-and-stretch keyframe through every letter with a 40ms stagger — scaleX fattens while scaleY squashes, whips past center the other way, and rings down to rest, the same overshoot curve animators have used since Disney's nine old men. Each letter also carries its own candy color that saturates as it wobbles. The big CTA is the container version: one squishy button that stretches wide on hover and SQUASHES flat on press, because :active without squash is a lie on a page like this.

PublishedAug 3, 2026

20 / 30CSS only

Variable Font Weight Shift

Menu items that swell from Light 300 to ExtraBold 800 under the cursor — continuously, through every intermediate weight, because with a variable font font-weight is an ANIMATABLE AXIS, not four frozen files. And the companion trick that makes it shippable: bold glyphs are wider, so each label hides a bold ghost of itself (a ::after reading data-text) that reserves the maximum width up front — the row never reflows, the classic 'menu shudder' bug solved in four lines. The section tags morph the opposite way, bold→light, as their row loses focus.

PublishedAug 3, 2026

21 / 30CSS only

Rainbow Gradient Flow

A rainbow with engineering in it: instead of hand-picking seven stops, the gradient is TWO colors and one instruction — linear-gradient(90deg in oklch longer hue, …) — telling the browser to travel the long way around the hue wheel, generating the entire spectrum at perceptually even brightness (no muddy dark cyan, no blinding yellow spike like sRGB rainbows). At rest the headline is quiet ink; hover crossfades it out (demo 03's color→transparent trick) while background-position flows the spectrum through the glyphs on a seamless 300%-wide loop.

PublishedAug 3, 2026

22 / 30CSS only

Rotational / Perspective Tilt Text

A headline that tilts TOWARD your cursor — up-left, down-right, wherever you approach from — with zero JavaScript. The trick: four invisible quadrant hover zones laid over the word, each one steering the sibling headline to a different rotateX/rotateY pose via the ~ combinator; glide across the word and the transitions blend poses continuously, faking full cursor tracking with four rules. The text-shadow slides opposite the tilt every time (light stays put, object turns), which is what convinces your eye it's one rigid object in space.

PublishedAug 3, 2026

23 / 30CSS only

Smoke / Dissolve Particle Effect

Hold the cursor on the title and it exhales: each letter blurs, lightens, drifts up along its own slightly different heading, and thins to nothing — smoke leaving a cooling fire. Pull away mid-dissolve and it re-condenses through the exact same path, because everything is transitions (never keyframes): per-letter drift vectors and rotations live in inline custom properties, delays stagger 35ms per letter, and filter:blur() is the actual smoke. The full word stays in the accessibility tree via aria-label while the letter spans do the vanishing.

PublishedAug 3, 2026

24 / 30CSS only

Fire / Heat Wave Glow Text

Type that catches fire the physically-plausible way: flames only burn UP, so the shadow stack builds vertically — white-yellow heat tight under the glyphs, orange above, red higher, smoke-dark at the top — and a three-frame flicker keyframe jitters those offsets so the fire licks instead of glows. A 0.5deg skew wobble on a fast alternate loop adds the heat-haze shimmer. At rest the wordmark idles as cooling embers (faint amber pulse); hover is ignition. All text-shadow + transform: no images, no canvas, one element.

PublishedAug 3, 2026

25 / 30CSS + 20-line JS

Text Shadow Direction Movement

Your cursor becomes the room's lamp: every heading on the board casts its shadow AWAY from the pointer, and the shadows stretch longer and softer as the light gets further away — all three cards disagreeing about shadow direction at once, which is exactly what sells a single shared light source. Twenty lines of JS do vector math (pointer→element, inverted, distance-scaled) into three custom properties per heading; text-shadow consumes them. A warm glow pool follows the cursor across the board so you can SEE the lamp you're holding.

PublishedAug 3, 2026

26 / 30CSS + 16-line JS

Text Marquee Speed-Up on Hover

The streetwear ticker with the acceleration everyone gets wrong: the loop is pure CSS (duplicated content, translateX to -50%, seamless forever), and hovering makes it SURGE smoothly — because 16 lines of JS grab the CSS animation through the Web Animations API and call updatePlaybackRate(4), which velocity-matches instead of teleporting. Changing animation-duration in CSS snaps the phase (the naive approach visibly jumps); updatePlaybackRate is the engine-level 'same tape, faster motor'. Includes the legally-required-by-taste pause button, wired to the same API.

PublishedAug 3, 2026

27 / 30CSS only

Duotone / Split Color Split Text

Risograph typography in the browser: the headline renders as two full-height clones of itself — red one clipped to the top half, blue one to the bottom — stacked in perfect register via pseudo-elements reading data-text (one string in the DOM, one string for screen readers). Hover knocks the print out of register: the split line slides off 50/50, the halves shear apart horizontally by a few hundredths of an em, and because clip-path inset() interpolates natively, the whole misprint is one smooth transition. The nav links run the same split vertically, left/right.

PublishedAug 3, 2026

28 / 30CSS only

Tooltip Text Reveal

Definition tooltips on the jargon in a SaaS feature list — pure CSS, but built like product UI, not a CodePen: the bubble is ::after reading attr(data-tip) with an ::before arrow; it fades/lifts in on a 350ms INTENT delay (so drive-by cursors never trigger a flicker storm) yet hides instantly on exit and shows instantly on keyboard focus — three different timings, all from transition-delay placement. Terms are real <button>s with aria-describedby pointing at screen-reader text, because a tooltip a screen reader can't hear is a decoration, not a tooltip.

PublishedAug 3, 2026

29 / 30CSS + SVG filter

Distorted Wave / Ripple Effect

Type seen through moving water: an SVG filter — feTurbulence generating animated noise, feDisplacementMap pushing the glyph pixels around by it — does distortion CSS alone cannot, and a SMIL <animate> keeps the wave rolling with zero JavaScript. The integration trick is the crossfade: filter:url() can't transition, so the headline keeps a crisp copy and a permanently-rippling aria-hidden clone stacked on it, and hover simply fades between them — the water rises smoothly over the word instead of snapping on.

PublishedAug 3, 2026

30 / 30CSS only

Mask Clip Path Reveal

The geometry chapter that closes the collection: three reveal shapes on one board, all riding clip-path's native interpolation. A DIAGONAL WIPE — an accent-colored clone clipped to a 4-point polygon that sweeps corner-to-corner (the parallelogram's leading edge stays angled mid-flight). A CIRCLE BLOOM — a photograph clipped inside the glyphs (background-clip:text) revealed by circle(0%) growing to circle(75%). And BLINDS — a 12-point polygon whose three zero-width slats grow open into thirds of the word. The one law under all three: shapes interpolate only between the SAME function with the SAME point count.

PublishedAug 3, 2026

FAQ

Frequently asked questions

What's the difference between CSS text hover effects and the css-text-animations / css-text-gradient-effect / css-link-effects / css-glitch-text-effect / css-neon-text-effect collections — why 6 text-focused collections?

Each collection solves a different job — the differentiation matters because Google's query clusters split cleanly by INTENT. css-text-hover-effects (this collection) — 30 patterns that fire ON HOVER (and :focus-visible for keyboard parity). Reversible transitions: hover in, hover out, back to rest. The user's interaction TRIGGERS the effect. Use when you want a button label / heading / navigation link to react to user attention. css-text-animations — continuous/scroll-driven text animation (typewriter loops, marquees, kinetic hero animations that fire on page load and keep going). No user-interaction trigger required. Use for above-the-fold marketing headlines that need constant motion. css-text-gradient-effect — STATIC gradient text treatments (aurora clip, chrome, holographic, iridescent). No hover trigger, no animation — just the color paint. Use for logo wordmarks, hero headlines where gradient IS the identity. css-link-effects — hover effects specifically for <a> tags in body text and navigation. Overlap with #01 underline in this collection is intentional — link-effects covers the 26-variant underline / hover treatment cluster for anchor-tag-specific use; text-hover-effects covers headings, wordmarks, and non-anchor text hovers. css-glitch-text-effect + css-neon-text-effect — deep-dive single-technique showcases (10-20 variants of glitch, 10-20 of neon). This collection ships ONE canonical hover-triggered glitch (Demo 06) + ONE canonical hover-triggered neon (Demo 07) as part of the broader hover toolkit. Use the deep-dive collections when you're picking THE glitch or THE neon; use this one when you're picking from a mixed toolkit of hover effects. The SEO angle: each collection ranks for its query cluster without cannibalizing siblings because the query intent differs — 'css text hover effect' searchers want a toolkit, 'css typewriter effect' searchers want the typewriter, 'css neon text' searchers want the neon library.

How do I make CSS text hover effects accessible for keyboard users — the WCAG 2.1.1 mirror pattern most tutorials miss?

The single most-missed accessibility fix on text hover effects: every :hover selector must be paired with :focus-visible. Mouse users trigger effects with hover; keyboard users navigate with Tab and land on :focus-visible. If the effect only fires on hover, keyboard users see NOTHING happen — they've focused an element and there's no visual feedback that they're on it. This fails WCAG 2.1.1 (Keyboard) and 2.4.7 (Focus Visible) — both AA-level violations that ADA lawsuits, Section 508 audits, and EU Accessibility Act enforcement (June 2025) actively cite. The 2-line fix: instead of .link:hover { ... }, write .link:hover, .link:focus-visible { ... }. Every one of the 30 demos in this collection ships this pattern. Verify by tabbing through — each effect should fire when the element gains keyboard focus, identically to hover. Additional non-negotiables: (1) prefers-reduced-motion guard per WCAG 2.3.3 — vestibular-sensitive users (~35% of adults per WebAIM 2024 survey) need continuous animations to CALM to a simple color/underline change under @media (prefers-reduced-motion: reduce). Every demo here ships this. (2) Never make color the SOLE indicator per WCAG 1.4.1 (Use of Color) — a gradient text hover that shifts hue but doesn't change weight/underline/decoration fails colorblind users. Pair gradient shifts with underline appearance, weight bump, or scale change. (3) Text-shadow blur on hover is a Core Web Vitals INP hazard on lower-end Android — animate opacity and filter on a pseudo-element instead of animating text-shadow blur-radius directly (compositor thread vs main thread). Demo 07 (neon) and Demo 24 (fire) both ship the compositor-thread pattern. (4) Focus rings must stay VISIBLE when the effect fires — a common mistake is having the hover transform mask the focus outline. Test with document.querySelector('.your-el').focus() and confirm the ring is visible.

How do I build a cursor-tracked spotlight text mask (photo-in-text with radial gradient following the mouse) — Demo 11 recipe?

Demo 11 (Mask / Spotlight Text Reveal) ships the exact recipe every 2026 SaaS marketing hero uses when they want their brand image to appear WITHIN their headline text. Three components layered. (1) Two stacked text elements at same position: base .text-base in a low-contrast color (says 'INSIGHTS 2026'), and an overlay .text-photo that uses background-image: url(...) + background-clip: text; -webkit-background-clip: text; color: transparent. Result: the photo shows only within the letter shapes of the overlay. (2) Radial mask on the overlay: .text-photo { mask: radial-gradient(120px circle at var(--x) var(--y), black 0%, transparent 100%); -webkit-mask: same }. The radial gradient acts as a stencil — only the area within the circle is visible; outside is masked. (3) JS updates --x / --y from pointer position: 12-line vanilla IIFE with a pointermove listener on the container that writes e.offsetX + 'px' and e.offsetY + 'px' to CSS custom properties on the container. rAF-throttled so it hits 60fps on the compositor thread. Zero React state, zero re-renders. Result: as the user moves their cursor over the headline, a spotlight follows revealing the photo underneath. Falls back gracefully — if JS fails, the mask center stays at 50% 50% and the photo shows through a static spotlight. Same pattern Stripe uses on their homepage hero, Linear's about page, Vercel's docs landing, Cursor's Cmd+K teaser, v0's playground marketing. WCAG 2.1.1 fix: on :focus-visible, force the mask to full-visible (spotlight covers the entire text) so keyboard users see the photo reveal too. Demo 11 in this collection ships all three layers + the a11y fix. Bundle cost: 12 lines JS, ~500 bytes gzipped. Compare to Framer Motion (35KB+ + React) or GSAP ($99+/yr Business license for commercial use) — this pattern is native web platform at 0KB runtime.

Which text-hover patterns fit high-CPM verticals — SaaS marketing headlines (Stripe/Vercel/Linear), editorial (NYT/Substack), portfolio + agency creative (Awwwards SOTD), luxury e-commerce (Farfetch/MatchesFashion), premium fintech dashboards, Web3 wallet UIs?

Text hover effects are the highest-density micro-interaction signal on tier-1 marketing surfaces because a live headline / nav link / CTA label that reacts to attention reads as premium and polished in a way flat text never does. Seven demos in this collection map directly to very-high-CPM verticals: Demo 01 (Animated Underlines) + Demo 20 (Variable Font Weight Shift) — the Stripe / Vercel / Linear / Notion / Framer / Superhuman docs + marketing nav pattern. Simple, restrained, professional. SaaS marketing CPM $15-25, luxury SaaS ($99+/mo tier) $20-35. Demo 08 (Metallic Shimmer) + Demo 15 (Letter-Spacing Expansion) — the Farfetch / MatchesFashion / Ssense / Net-a-Porter luxury e-commerce heading aesthetic. Fashion e-commerce CPM $8-15, luxury fashion $15-30. Also fits private banking / concierge services ($40-80 CPM). Demo 06 (Glitch) + Demo 07 (Neon) + Demo 24 (Fire) — gaming / Web3 / cyberpunk / crypto DEX / NFT marketplace CTAs. Gaming CPM $8-30, Web3 wallet $8-15, DeFi $15-30, luxury NFT $25+. Demo 11 (Spotlight Mask) + Demo 14 (Magnetic Cursor) + Demo 25 (Text-Shadow Direction) — the Cursor Editor / v0 / ChatGPT / Claude / Perplexity AI-product landing headline pattern. AI product marketing CPM $20-40. Demo 05 (Text Swap / Flip Up) + Demo 27 (Riso Duotone) — editorial (NYT / Kinfolk / Substack / Medium) and portfolio / agency creative (Awwwards SOTD / Read.cv / Bestfolios). Editorial CPM $5-12, agency-adjacent $8-25. Demo 21 (Rainbow OKLCH) + Demo 27 (Riso) — Pride landing pages / creator brand microsites / streetwear e-commerce ($8-15). Demo 28 (Tooltip Reveal) — dev tools / API docs / dashboard tooltips (Stripe API reference / Docusaurus / Mintlify / Nextra pattern — dev tools CPM $8-15). Beyond direct vertical mapping, ALL text hover effects lift Google Ads Quality Score (20-40% CPC reduction for the same placement) because a page with high-craft hover microinteractions signals 'high effort' to Google's engagement metrics (session duration + scroll depth + interaction count). Enterprise procurement in fintech / healthcare / legal has accessibility as a literal RFP checklist item — the WCAG 2.2 AA + focus-visible mirroring this collection ships passes.

How do I make a variable-font weight morph text hover (Demo 20) — the modern 2026 replacement for old font-weight step hover?

Demo 20 (Variable Font Weight Shift) uses the modern font-variation-settings API (Baseline: Chrome 62 / Safari 11 / Firefox 62 — universally supported since 2018) to smoothly morph text weight on hover instead of the old step-only font-weight: 400 → 700 jump. Recipe: (1) Load a variable font with the 'wght' axis exposed — Manrope, Inter, Recursive, Roboto Flex, Fraunces all ship this. Demo 20 uses Manrope. (2) Set the base state: .text { font-variation-settings: 'wght' 400 }. (3) On hover: .text:hover, .text:focus-visible { font-variation-settings: 'wght' 700 }. (4) Add the transition on the settings property: transition: font-variation-settings 0.3s cubic-bezier(0.4, 0, 0.2, 1). Result: the letterforms smoothly morph from 400 to 700 over 300ms — every intermediate weight (450, 500, 550, 600...) renders correctly because variable fonts interpolate the design space. The trap most tutorials miss: naïve implementations shift the layout as text gets bolder (bolder = wider). Fix: reserve the bold width upfront using a phantom span. Set .text { position: relative } and pseudo-element

.text::before { content: attr(data-text); font-variation-settings: 'wght' 700; visibility: hidden; position: absolute; inset: 0 }

. The pseudo reserves the widest state; the visible text morphs within that reserved box, so no layout shift (CLS 0). This is the pattern Linear docs, Vercel dashboard, and Stripe marketing all ship. Compare to the old approach: font-weight step animations require you to ship multiple font files (Regular 400 + Bold 700), the browser can't interpolate weights between them, and hover animations snap between the two — a hard jump instead of a smooth morph. Variable fonts ship ONE file with a continuous weight axis (typically 100-900) and let CSS animate through the axis smoothly. Font file size is comparable (Manrope variable = 60KB, Manrope Regular + Bold = 55KB, so effectively the same weight).

What's the browser support + progressive-enhancement story for CSS text hover primitives in 2026 (background-clip: text, @property, text-shadow, filter, mask, oklch, container queries)?

Every primitive this collection uses is Baseline-supported since at least 2023, meaning 96%+ of tier-1 country traffic (US/UK/CA/AU/NZ) supports every feature without fallbacks. Detailed matrix as of August 2026: background-clip: text — Baseline since 2020 with the -webkit- prefix (Chrome 3 / Safari 4 / Firefox 49). Every demo that uses it also declares -webkit-background-clip: text for Safari safety. Wrap in @supports ((background-clip: text) or (-webkit-background-clip: text)) { .el { color: transparent } } so the fallback (normal color: var(--ink)) is used when unsupported — this is the invisible-text WCAG 1.4.3 fix. Demo 27 in this collection ships this exact @supports guard. @property — Baseline widely available since April 2024 (Chrome 85 / Safari 16.4 / Firefox 128). Registers custom properties with typed syntax so they interpolate smoothly. Used in Demos 02 (fill %), 18 (border angle), 30 (mask position). Without it, the properties still work but hard-jump instead of interpolating. oklch() + color-mix() — Baseline widely available since 2023 (Chrome 111 / Safari 15.4 / Firefox 113). Falls back to browser default. text-shadow + filter — universal support since 2011. -webkit-text-stroke — Baseline widely available since 2018 (Chrome 4 / Safari 3.1 / Firefox 49). mask-image / mask — Baseline widely available since 2023 (Chrome 120 / Safari 15.4 / Firefox 53). Pair -webkit-mask + unprefixed mask. container queries — Baseline widely available since February 2023 (Chrome 105 / Safari 16 / Firefox 110). SVG feTurbulence + feDisplacementMap (Demo 29) — universal since 2010. font-variation-settings (Demo 20) — universal since 2018. attr(data-text) in content (Demos 06 + 27) — universal since 2011. Progressive enhancement recipe: layer declarations from oldest-supported to newest, so old browsers get a functional (if less polished) baseline. Every demo in this collection stays FUNCTIONAL in every browser since 2018 — you still get text with a hover color/underline change, just without the advanced effect. Enterprise procurement (Fortune 500 IT with corporate Windows fleets) tests this fallback path — this collection passes. Google Fonts @import is used ONCE in the collection (Demo 20 for Manrope variable font). Header comment authorizes it because the variable-font weight axis IS the demo's whole point; every other demo uses system font stacks.

Do these CSS text hover effects work in React, Vue, Svelte, Astro, Next.js, Remix, Tailwind CSS, shadcn/ui — and what's the framework portability story vs Framer Motion, GSAP, split-text libraries?

Every demo is plain HTML + CSS with zero dependencies, zero build steps, and zero framework lock-in. To port to React / Next.js App Router: rename class to className, drop the JSX into any server or client component (no 'use client' directive needed for the 25 Pure CSS demos because they have no interactivity that requires hydration; only Demos 11 (spotlight cursor) + 14 (magnetic cursor) + 17 (scramble) + 25 (shadow vector) + 26 (marquee speed) need it, each under 25L). Vue 3 / Nuxt 3: accepts as-is, class attribute is native. Svelte / SvelteKit: accepts as-is. Astro: drop into any .astro component (this site is Astro; every demo renders SSR on this page). Remix / Solid.js / Qwik: accepts as-is. Tailwind CSS v3/v4: hover:underline/hover:decoration-* utilities map 1:1 for Demo 01; complex demos (glitch, spotlight, magnetic) require Tailwind's arbitrary-value syntax or @layer components block. Compared to text-animation JavaScript libraries: Framer Motion (~35KB gzipped + React dep + Motion Values state management) — provides text-animation primitives but each hover effect this collection ships in 20-60 lines of CSS costs 100-300 lines in Framer Motion + the runtime overhead. GSAP (SplitText plugin: $99+/yr Business license for commercial use since 2024 relicense to Business tier only — the free Standard tier no longer includes SplitText) — text-hover effects like glitch, scramble, magnetic are all doable in GSAP but require the ScrollTrigger + SplitText plugins which cost annually. This collection ships every one of those patterns MIT-licensed. split-type / splitting.js — ~15KB gzipped libraries that split text into per-letter spans for stagger animation. Demo 10 (Split Letter Wave) ships the same result with pre-split HTML markup + calc() delay, zero library. Aceternity UI / Magic UI — React + Tailwind text-hover component libraries ($299+/yr for Aceternity Pro / open-source Magic UI ~150KB deps). Every visual pattern they ship is rebuildable in native CSS from this collection's recipes. The .cth-NN numeric-prefix scoping means all 30 text hover patterns coexist on the gallery page without a single class collision, and the same prefix guarantees you can drop any one demo into a codebase that already uses .text, .headline, .link, or .wordmark classes without renaming a single selector. MIT licensed, no attribution required, no signup.

Related collections

20 CSS Animated Buttons

20 hand-coded CSS animated buttons — neon glow, ripple, 3D press, liquid fill, jelly bounce, shine sweep, animated border, moving gradient CTA, text flip, submit success state, add-to-cart progress, download icon, hamburger-to-close, toggle switch, loading spinner inside button, next/prev arrow nav, and ghost button background reveal. Half pure CSS, half lightweight JS for production interactions.

11 CSS animation-timeline Demos

11 pure CSS animation-timeline demos built on the W3C scroll() and view() spec — reading progress bar, view-timeline fade & reveal, shrinking sticky header, stacking cards, horizontal scroll section, parallax hero, container shadow indicators, reverse-scroll columns, text scrim reveal, cover card to sticky header, and image zoom / clip-path wipe. Zero JS, off the main thread, Core Web Vitals safe. Copy-paste ready.

25 CSS Background Animations

25 hand-coded CSS background animations for SaaS hero sections, developer tool documentation, agency portfolios, gaming and Web3 landing pages, seasonal e-commerce campaigns, and dark-mode dashboards. Covers full-screen gradient shifts, animated mesh gradients, aurora borealis glow, cursor spotlight follow, interactive water ripples, dot grid and diagonal stripe patterns, SVG grain and noise texture overlays, topographic contour lines, layered SVG waves, plasma and lava lamp fluids, bokeh light blur, particle constellation networks, matrix digital rain, synthwave 3D perspective grids, starfield warp speed, CRT scanline overlays, fog and mist drift, morphing organic blobs, floating glassmorphism orbs, halftone dot patterns, starry night skies, floating geometric shapes, rising bubbles, and falling snow. 20 are pure CSS with zero JavaScript; the 5 that need it use vanilla canvas or pointer tracking with no dependencies. Every background animates compositor-only properties so it never blocks the main thread, is scoped under a .bga-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.