30 Tailwind CSS Hover Effects
03 / 30

All 30 in 30 Tailwind CSS Hover Effects

  1. 01Tailwind Underline Draw Hover Effect
  2. 02Tailwind Text Glitch Hover Effect
  3. 03Tailwind Letter Spacing Expand Hover Effect
  4. 04Tailwind Gradient Text Reveal Hover Effect
  5. 05Tailwind Split Text Hover Effect
  6. 06Tailwind Neon Glow Text Hover Effect
  7. 07Tailwind Magnetic Liquid Button Hover Effect
  8. 08Tailwind Border Draw Hover Effect
  9. 09Tailwind Shimmer Shine Button Hover Effect
  10. 10Tailwind Fill Wipe Button Hover Effect
  11. 11Tailwind 3D Press Button Hover Effect
  12. 12Tailwind Ripple Button Hover Effect
  13. 13Tailwind 3D Tilt Card Hover Effect
  14. 14Tailwind Card Flip Hover Effect
  15. 15Tailwind Glassmorphism Card Hover Effect
  16. 16Tailwind Spotlight Card Hover Effect
  17. 17Tailwind Slide Reveal Card Hover Effect
  18. 18Tailwind Stack Lift Card Hover Effect
  19. 19Tailwind Zoom Pan Image Hover Effect
  20. 20Tailwind Color Channel Split Hover Effect
  21. 21Tailwind Duotone Image Hover Effect
  22. 22Tailwind Curtain Reveal Image Hover Effect
  23. 23Tailwind Ken Burns Image Hover Effect
  24. 24Tailwind Image Tilt Depth Hover Effect
  25. 25Tailwind Underline Slide Nav Hover Effect
  26. 26Tailwind Highlight Fill Nav Hover Effect
  27. 27Tailwind Strikethrough Hover Link Effect
  28. 28Tailwind Inline Word Swap Hover Effect
  29. 29Tailwind Dot Trail Cursor Hover Effect
  30. 30Tailwind Magnetic Cursor Pull Hover Effect
Pure TailwindMIT licensed

Tailwind Letter Spacing Expand Hover Effect

Five typographic hovers driven by tracking alone — expand, collapse-in, per-letter stagger, weight-plus-tracking and tracking-plus-glow. Tailwind's tracking-* scale covers the resting values; the wide hover targets are arbitrary, which is the correct split.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="thv-03 w-full min-h-svh grid place-items-center bg-thv03-bg font-thv03-sans px-6 py-14">
  <div class="w-[min(720px,100%)] flex flex-col gap-4">
    <div class="flex flex-wrap items-center justify-between gap-5 px-9 py-7 rounded-xl bg-white/[0.03] border border-white/[0.07] overflow-hidden">
      <span tabindex="0" class="inline-block text-[clamp(1.4rem,4vw,2rem)] font-bold text-thv03-purple tracking-[0.02em] rounded-xs transition-[letter-spacing,color] duration-400 ease-[cubic-bezier(.4,0,.2,1)] hover:tracking-[0.35em] hover:text-thv03-text focus-visible:tracking-[0.35em] focus-visible:text-thv03-text focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv03-purple motion-reduce:transition-none">EXPAND</span>
      <span class="shrink-0 text-[11px] tracking-[0.12em] uppercase text-thv03-dim">letter-spacing expand</span>
    </div>
    <div class="flex flex-wrap items-center justify-between gap-5 px-9 py-7 rounded-xl bg-white/[0.03] border border-white/[0.07] overflow-hidden">
      <span tabindex="0" class="inline-block text-[clamp(1.4rem,4vw,2rem)] font-bold text-thv03-pink tracking-[0.4em] rounded-xs transition-[letter-spacing,color] duration-400 ease-[cubic-bezier(.4,0,.2,1)] hover:tracking-[0.02em] hover:text-white focus-visible:tracking-[0.02em] focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv03-pink motion-reduce:transition-none">COLLAPSE</span>
      <span class="shrink-0 text-[11px] tracking-[0.12em] uppercase text-thv03-dim">tracking collapse-in</span>
    </div>
    <div class="flex flex-wrap items-center justify-between gap-5 px-9 py-7 rounded-xl bg-white/[0.03] border border-white/[0.07] overflow-hidden">
      <span tabindex="0" class="group inline-flex text-[clamp(1.4rem,4vw,2rem)] font-bold text-thv03-cyan tracking-[0.02em] rounded-xs focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv03-cyan"><span class="inline-block transition-[letter-spacing,opacity] duration-400 ease-[cubic-bezier(.4,0,.2,1)] group-hover:tracking-[0.2em] group-hover:opacity-30 group-focus-visible:tracking-[0.2em] group-focus-visible:opacity-30 motion-reduce:transition-none">D</span><span class="inline-block transition-[letter-spacing,opacity] duration-400 delay-[40ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:tracking-[0.2em] group-hover:opacity-30 group-focus-visible:tracking-[0.2em] group-focus-visible:opacity-30 motion-reduce:transition-none">R</span><span class="inline-block transition-[letter-spacing,opacity] duration-400 delay-[80ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:tracking-[0.2em] group-hover:opacity-30 group-focus-visible:tracking-[0.2em] group-focus-visible:opacity-30 motion-reduce:transition-none">I</span><span class="inline-block transition-[letter-spacing,opacity] duration-400 delay-[120ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:tracking-[0.2em] group-hover:opacity-30 group-focus-visible:tracking-[0.2em] group-focus-visible:opacity-30 motion-reduce:transition-none">F</span><span class="inline-block transition-[letter-spacing,opacity] duration-400 delay-[160ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:tracking-[0.2em] group-hover:opacity-30 group-focus-visible:tracking-[0.2em] group-focus-visible:opacity-30 motion-reduce:transition-none">T</span></span>
      <span class="shrink-0 text-[11px] tracking-[0.12em] uppercase text-thv03-dim">stagger fade-out</span>
    </div>
    <div class="flex flex-wrap items-center justify-between gap-5 px-9 py-7 rounded-xl bg-white/[0.03] border border-white/[0.07] overflow-hidden">
      <span tabindex="0" class="inline-block text-[clamp(1.4rem,4vw,2rem)] font-normal text-thv03-amber tracking-[0.02em] rounded-xs transition-[letter-spacing,font-weight,color] duration-350 hover:tracking-[0.25em] hover:font-black hover:text-white focus-visible:tracking-[0.25em] focus-visible:font-black focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv03-amber motion-reduce:transition-none">BOLD TRACK</span>
      <span class="shrink-0 text-[11px] tracking-[0.12em] uppercase text-thv03-dim">weight + spacing</span>
    </div>
    <div class="flex flex-wrap items-center justify-between gap-5 px-9 py-7 rounded-xl bg-white/[0.03] border border-white/[0.07] overflow-hidden">
      <span tabindex="0" class="inline-block text-[clamp(1.4rem,4vw,2rem)] font-bold text-thv03-text tracking-[0.06em] rounded-xs transition-[letter-spacing,text-shadow,color] duration-500 ease-[cubic-bezier(.4,0,.2,1)] hover:tracking-[0.3em] hover:text-white hover:[text-shadow:0_0_20px_var(--color-thv03-purple),0_0_60px_var(--color-thv03-pink)] focus-visible:tracking-[0.3em] focus-visible:text-white focus-visible:[text-shadow:0_0_20px_var(--color-thv03-purple),0_0_60px_var(--color-thv03-pink)] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv03-purple motion-reduce:transition-none">RADIANCE</span>
      <span class="shrink-0 text-[11px] tracking-[0.12em] uppercase text-thv03-dim">spacing + glow</span>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-thv03-bg: #0d0d14;
  --color-thv03-bg: oklch(0.16 0.01 285);
  --color-thv03-text: #ede9fe;
  --color-thv03-text: oklch(0.93 0.03 295);
  --color-thv03-dim: #6b7280;
  --color-thv03-dim: oklch(0.55 0.02 265);
  --color-thv03-purple: #a78bfa;
  --color-thv03-purple: oklch(0.72 0.15 295);
  --color-thv03-pink: #f472b6;
  --color-thv03-pink: oklch(0.72 0.19 350);
  --color-thv03-cyan: #67e8f9;
  --color-thv03-cyan: oklch(0.85 0.11 200);
  --color-thv03-amber: #fbbf24;
  --color-thv03-amber: oklch(0.82 0.16 82);
  --font-thv03-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-03 {
  width: 100%;
  min-height: 100svh;
}

.thv-03 ::selection {
  background: var(--color-thv03-purple);
  color: #fff;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-thv03-bg: #0d0d14;
  --color-thv03-bg: oklch(0.16 0.01 285);
  --color-thv03-text: #ede9fe;
  --color-thv03-text: oklch(0.93 0.03 295);
  --color-thv03-dim: #6b7280;
  --color-thv03-dim: oklch(0.55 0.02 265);
  --color-thv03-purple: #a78bfa;
  --color-thv03-purple: oklch(0.72 0.15 295);
  --color-thv03-pink: #f472b6;
  --color-thv03-pink: oklch(0.72 0.19 350);
  --color-thv03-cyan: #67e8f9;
  --color-thv03-cyan: oklch(0.85 0.11 200);
  --color-thv03-amber: #fbbf24;
  --color-thv03-amber: oklch(0.82 0.16 82);
  --font-thv03-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-03 {
  width: 100%;
  min-height: 100svh;
}

.thv-03 ::selection {
  background: var(--color-thv03-purple);
  color: #fff;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The five :nth-child delay rules become one delay utility per letter. Longer to type, but the wave now belongs to the word rather than to a selector that silently stops matching if a letter is added.
  • UI change from the CSS original: the words are focusable with focus-visible: twins, and each row clips with overflow-hidden so a 0.35em spread can never push a scrollbar onto the page.
  • transition-[letter-spacing,color] is written out because Tailwind's transition shorthand does not include letter-spacing — the single most common reason this effect ports as a snap.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Letter Spacing Expand Hover Effect
Source: https://codefronts.com/motion/tailwind-css-hover-effects/tailwind-letter-spacing-expand-hover-effect/

Five typographic hovers driven by tracking alone — expand, collapse-in, per-letter stagger, weight-plus-tracking and tracking-plus-glow. Tailwind's tracking-* scale covers the resting values; the wide hover targets are arbitrary, which is the correct split.
## HTML
```html
<section class="thv-03 w-full min-h-svh grid place-items-center bg-thv03-bg font-thv03-sans px-6 py-14">
  <div class="w-[min(720px,100%)] flex flex-col gap-4">
    <div class="flex flex-wrap items-center justify-between gap-5 px-9 py-7 rounded-xl bg-white/[0.03] border border-white/[0.07] overflow-hidden">
      <span tabindex="0" class="inline-block text-[clamp(1.4rem,4vw,2rem)] font-bold text-thv03-purple tracking-[0.02em] rounded-xs transition-[letter-spacing,color] duration-400 ease-[cubic-bezier(.4,0,.2,1)] hover:tracking-[0.35em] hover:text-thv03-text focus-visible:tracking-[0.35em] focus-visible:text-thv03-text focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv03-purple motion-reduce:transition-none">EXPAND</span>
      <span class="shrink-0 text-[11px] tracking-[0.12em] uppercase text-thv03-dim">letter-spacing expand</span>
    </div>
    <div class="flex flex-wrap items-center justify-between gap-5 px-9 py-7 rounded-xl bg-white/[0.03] border border-white/[0.07] overflow-hidden">
      <span tabindex="0" class="inline-block text-[clamp(1.4rem,4vw,2rem)] font-bold text-thv03-pink tracking-[0.4em] rounded-xs transition-[letter-spacing,color] duration-400 ease-[cubic-bezier(.4,0,.2,1)] hover:tracking-[0.02em] hover:text-white focus-visible:tracking-[0.02em] focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv03-pink motion-reduce:transition-none">COLLAPSE</span>
      <span class="shrink-0 text-[11px] tracking-[0.12em] uppercase text-thv03-dim">tracking collapse-in</span>
    </div>
    <div class="flex flex-wrap items-center justify-between gap-5 px-9 py-7 rounded-xl bg-white/[0.03] border border-white/[0.07] overflow-hidden">
      <span tabindex="0" class="group inline-flex text-[clamp(1.4rem,4vw,2rem)] font-bold text-thv03-cyan tracking-[0.02em] rounded-xs focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv03-cyan"><span class="inline-block transition-[letter-spacing,opacity] duration-400 ease-[cubic-bezier(.4,0,.2,1)] group-hover:tracking-[0.2em] group-hover:opacity-30 group-focus-visible:tracking-[0.2em] group-focus-visible:opacity-30 motion-reduce:transition-none">D</span><span class="inline-block transition-[letter-spacing,opacity] duration-400 delay-[40ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:tracking-[0.2em] group-hover:opacity-30 group-focus-visible:tracking-[0.2em] group-focus-visible:opacity-30 motion-reduce:transition-none">R</span><span class="inline-block transition-[letter-spacing,opacity] duration-400 delay-[80ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:tracking-[0.2em] group-hover:opacity-30 group-focus-visible:tracking-[0.2em] group-focus-visible:opacity-30 motion-reduce:transition-none">I</span><span class="inline-block transition-[letter-spacing,opacity] duration-400 delay-[120ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:tracking-[0.2em] group-hover:opacity-30 group-focus-visible:tracking-[0.2em] group-focus-visible:opacity-30 motion-reduce:transition-none">F</span><span class="inline-block transition-[letter-spacing,opacity] duration-400 delay-[160ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:tracking-[0.2em] group-hover:opacity-30 group-focus-visible:tracking-[0.2em] group-focus-visible:opacity-30 motion-reduce:transition-none">T</span></span>
      <span class="shrink-0 text-[11px] tracking-[0.12em] uppercase text-thv03-dim">stagger fade-out</span>
    </div>
    <div class="flex flex-wrap items-center justify-between gap-5 px-9 py-7 rounded-xl bg-white/[0.03] border border-white/[0.07] overflow-hidden">
      <span tabindex="0" class="inline-block text-[clamp(1.4rem,4vw,2rem)] font-normal text-thv03-amber tracking-[0.02em] rounded-xs transition-[letter-spacing,font-weight,color] duration-350 hover:tracking-[0.25em] hover:font-black hover:text-white focus-visible:tracking-[0.25em] focus-visible:font-black focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv03-amber motion-reduce:transition-none">BOLD TRACK</span>
      <span class="shrink-0 text-[11px] tracking-[0.12em] uppercase text-thv03-dim">weight + spacing</span>
    </div>
    <div class="flex flex-wrap items-center justify-between gap-5 px-9 py-7 rounded-xl bg-white/[0.03] border border-white/[0.07] overflow-hidden">
      <span tabindex="0" class="inline-block text-[clamp(1.4rem,4vw,2rem)] font-bold text-thv03-text tracking-[0.06em] rounded-xs transition-[letter-spacing,text-shadow,color] duration-500 ease-[cubic-bezier(.4,0,.2,1)] hover:tracking-[0.3em] hover:text-white hover:[text-shadow:0_0_20px_var(--color-thv03-purple),0_0_60px_var(--color-thv03-pink)] focus-visible:tracking-[0.3em] focus-visible:text-white focus-visible:[text-shadow:0_0_20px_var(--color-thv03-purple),0_0_60px_var(--color-thv03-pink)] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv03-purple motion-reduce:transition-none">RADIANCE</span>
      <span class="shrink-0 text-[11px] tracking-[0.12em] uppercase text-thv03-dim">spacing + glow</span>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-thv03-bg: #0d0d14;
  --color-thv03-bg: oklch(0.16 0.01 285);
  --color-thv03-text: #ede9fe;
  --color-thv03-text: oklch(0.93 0.03 295);
  --color-thv03-dim: #6b7280;
  --color-thv03-dim: oklch(0.55 0.02 265);
  --color-thv03-purple: #a78bfa;
  --color-thv03-purple: oklch(0.72 0.15 295);
  --color-thv03-pink: #f472b6;
  --color-thv03-pink: oklch(0.72 0.19 350);
  --color-thv03-cyan: #67e8f9;
  --color-thv03-cyan: oklch(0.85 0.11 200);
  --color-thv03-amber: #fbbf24;
  --color-thv03-amber: oklch(0.82 0.16 82);
  --font-thv03-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-03 {
  width: 100%;
  min-height: 100svh;
}

.thv-03 ::selection {
  background: var(--color-thv03-purple);
  color: #fff;
}
```

How this works

Tracking transitions natively. letter-spacing is an animatable length, so the port is literally tracking-[0.02em] → hover:tracking-[0.35em] with transition-[letter-spacing,color] naming both animated properties. Tailwind's default transition utility does not include letter-spacing, which is the one trap here.

The stagger keeps its spans but loses its rules. Five :nth-child selectors with incrementing delays become a delay-[Nms] written on each letter, driven by group-hover: from the word. Positional selectors are the fragile half of the CSS version — insert a letter and the wave silently reshuffles; a delay written on the letter cannot.

Weight is the tricky one. font-weight only tweens on a variable font; Space Grotesk is variable here, so font-normal hover:font-black animates smoothly rather than snapping.

Make it yours

  • Spread: hover:tracking-[0.3em] is editorial, hover:tracking-[0.6em] is display scale.
  • Slow it down with duration-600 for a luxury-brand pace.
  • Widen the stagger by bumping each delay-[Nms] to 50ms steps.

Gotchas — read before shipping

  • transition-all would work but repaints everything; name the properties with transition-[letter-spacing,color].
  • Trailing tracking is added after the last glyph, so a centred word drifts left — the rows use justify-between and overflow-hidden rather than centring to hide it.
  • font-weight tweening requires a variable font; with a static family hover:font-black snaps at 50%.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Letter-spacing transitions are universally supported; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗text shadowtw ↗:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →