30 Tailwind CSS Hover Effects
26 / 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 Highlight Fill Nav Hover Effect

Six nav fills — pill, block, gradient, a slashed clip-path, a radial spotlight and a difference-blend invert. Each is a before: layer behind the label; the invert variant is the one that needs a stacking context to behave.

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-26 w-full min-h-svh bg-thv26-bg font-thv26-sans px-8 py-12 flex flex-col gap-10">
  <p class="text-center text-[0.72rem] tracking-[0.15em] uppercase text-thv26-dim">Highlight Fill Nav — 6 Styles</p>

  <nav aria-label="Pill fill" class="flex flex-wrap items-center gap-6">
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded-full transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-thv26-acc before:opacity-0 before:scale-x-[.1] before:scale-y-[.4] before:transition-[transform,opacity] before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:opacity-100 hover:before:scale-100 focus-visible:before:opacity-100 focus-visible:before:scale-100 motion-reduce:before:transition-opacity">Explore</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded-full transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-thv26-acc before:opacity-0 before:scale-x-[.1] before:scale-y-[.4] before:transition-[transform,opacity] before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:opacity-100 hover:before:scale-100 focus-visible:before:opacity-100 focus-visible:before:scale-100 motion-reduce:before:transition-opacity">Gallery</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded-full transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-thv26-acc before:opacity-0 before:scale-x-[.1] before:scale-y-[.4] before:transition-[transform,opacity] before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:opacity-100 hover:before:scale-100 focus-visible:before:opacity-100 focus-visible:before:scale-100 motion-reduce:before:transition-opacity">Studio</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded-full transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-thv26-acc before:opacity-0 before:scale-x-[.1] before:scale-y-[.4] before:transition-[transform,opacity] before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:opacity-100 hover:before:scale-100 focus-visible:before:opacity-100 focus-visible:before:scale-100 motion-reduce:before:transition-opacity">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Pill Fill</span>
  </nav>

  <nav aria-label="Block fill" class="flex flex-wrap items-center gap-6">
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-thv26-acc before:origin-bottom before:scale-y-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-y-100 focus-visible:before:scale-y-100 motion-reduce:before:transition-none">Explore</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-thv26-acc before:origin-bottom before:scale-y-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-y-100 focus-visible:before:scale-y-100 motion-reduce:before:transition-none">Gallery</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-thv26-acc before:origin-bottom before:scale-y-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-y-100 focus-visible:before:scale-y-100 motion-reduce:before:transition-none">Studio</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-thv26-acc before:origin-bottom before:scale-y-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-y-100 focus-visible:before:scale-y-100 motion-reduce:before:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Block Fill</span>
  </nav>

  <nav aria-label="Gradient fill" class="flex flex-wrap items-center gap-6">
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:opacity-90 before:bg-[linear-gradient(135deg,#7c6af7,#f764a8)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Explore</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:opacity-90 before:bg-[linear-gradient(135deg,#7c6af7,#f764a8)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Gallery</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:opacity-90 before:bg-[linear-gradient(135deg,#7c6af7,#f764a8)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Studio</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:opacity-90 before:bg-[linear-gradient(135deg,#7c6af7,#f764a8)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Gradient Fill</span>
  </nav>

  <nav aria-label="Slash clip" class="flex flex-wrap items-center gap-6">
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-[#111111] focus-visible:text-[#111111] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-gold before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-thv26-gold before:[clip-path:polygon(8%_0%,100%_0%,92%_100%,0%_100%)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Explore</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-[#111111] focus-visible:text-[#111111] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-gold before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-thv26-gold before:[clip-path:polygon(8%_0%,100%_0%,92%_100%,0%_100%)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Gallery</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-[#111111] focus-visible:text-[#111111] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-gold before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-thv26-gold before:[clip-path:polygon(8%_0%,100%_0%,92%_100%,0%_100%)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Studio</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-[#111111] focus-visible:text-[#111111] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-gold before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-thv26-gold before:[clip-path:polygon(8%_0%,100%_0%,92%_100%,0%_100%)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Slash Clip</span>
  </nav>

  <nav aria-label="Radial spotlight" class="flex flex-wrap items-center gap-6">
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:opacity-0 before:scale-0 before:bg-[radial-gradient(ellipse_at_center,rgba(124,106,247,.7)_0%,transparent_72%)] before:transition-[transform,opacity] before:duration-300 hover:before:opacity-100 hover:before:scale-[2] focus-visible:before:opacity-100 focus-visible:before:scale-[2] motion-reduce:before:transition-opacity">Explore</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:opacity-0 before:scale-0 before:bg-[radial-gradient(ellipse_at_center,rgba(124,106,247,.7)_0%,transparent_72%)] before:transition-[transform,opacity] before:duration-300 hover:before:opacity-100 hover:before:scale-[2] focus-visible:before:opacity-100 focus-visible:before:scale-[2] motion-reduce:before:transition-opacity">Gallery</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:opacity-0 before:scale-0 before:bg-[radial-gradient(ellipse_at_center,rgba(124,106,247,.7)_0%,transparent_72%)] before:transition-[transform,opacity] before:duration-300 hover:before:opacity-100 hover:before:scale-[2] focus-visible:before:opacity-100 focus-visible:before:scale-[2] motion-reduce:before:transition-opacity">Studio</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:opacity-0 before:scale-0 before:bg-[radial-gradient(ellipse_at_center,rgba(124,106,247,.7)_0%,transparent_72%)] before:transition-[transform,opacity] before:duration-300 hover:before:opacity-100 hover:before:scale-[2] focus-visible:before:opacity-100 focus-visible:before:scale-[2] motion-reduce:before:transition-opacity">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Radial Spotlight</span>
  </nav>

  <nav aria-label="Invert blend" class="isolate flex flex-wrap items-center gap-6">
    <a href="#" class="relative px-3 py-1.5 text-[0.95rem] font-medium text-white no-underline rounded mix-blend-difference focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-white before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-white before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Explore</a>
    <a href="#" class="relative px-3 py-1.5 text-[0.95rem] font-medium text-white no-underline rounded mix-blend-difference focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-white before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-white before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Gallery</a>
    <a href="#" class="relative px-3 py-1.5 text-[0.95rem] font-medium text-white no-underline rounded mix-blend-difference focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-white before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-white before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Studio</a>
    <a href="#" class="relative px-3 py-1.5 text-[0.95rem] font-medium text-white no-underline rounded mix-blend-difference focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-white before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-white before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Invert Blend</span>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-thv26-bg: #0a0a10;
  --color-thv26-bg: oklch(0.12 0.01 285);
  --color-thv26-ink: #c4c4cc;
  --color-thv26-ink: oklch(0.81 0.01 285);
  --color-thv26-dim: #8a8a96;
  --color-thv26-dim: oklch(0.64 0.01 285);
  --color-thv26-acc: #5b4fcf;
  --color-thv26-acc: oklch(0.5 0.2 285);
  --color-thv26-gold: #e8c840;
  --color-thv26-gold: oklch(0.84 0.15 95);
  --font-thv26-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

.thv-26 ::selection {
  background: var(--color-thv26-acc);
  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-thv26-bg: #0a0a10;
  --color-thv26-bg: oklch(0.12 0.01 285);
  --color-thv26-ink: #c4c4cc;
  --color-thv26-ink: oklch(0.81 0.01 285);
  --color-thv26-dim: #8a8a96;
  --color-thv26-dim: oklch(0.64 0.01 285);
  --color-thv26-acc: #5b4fcf;
  --color-thv26-acc: oklch(0.5 0.2 285);
  --color-thv26-gold: #e8c840;
  --color-thv26-gold: oklch(0.84 0.15 95);
  --font-thv26-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

.thv-26 ::selection {
  background: var(--color-thv26-acc);
  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.

  • isolate is the quiet hero: one utility replaces the source's z-index: 0 / z-index: -1 dance and the comment explaining it.
  • UI change from the CSS original: the resting link colour was lifted to ~0.81 lightness (from #bbb on near-black) and every fill has a focus-visible: twin plus a ring, so the nav is fully keyboard-operable.
  • Each nav carries an aria-label, because six unlabelled <nav> landmarks on one page is a screen-reader maze.
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 Highlight Fill Nav Hover Effect
Source: https://codefronts.com/motion/tailwind-css-hover-effects/tailwind-highlight-fill-nav-hover-effect/

Six nav fills — pill, block, gradient, a slashed clip-path, a radial spotlight and a difference-blend invert. Each is a before: layer behind the label; the invert variant is the one that needs a stacking context to behave.
## HTML
```html
<section class="thv-26 w-full min-h-svh bg-thv26-bg font-thv26-sans px-8 py-12 flex flex-col gap-10">
  <p class="text-center text-[0.72rem] tracking-[0.15em] uppercase text-thv26-dim">Highlight Fill Nav — 6 Styles</p>

  <nav aria-label="Pill fill" class="flex flex-wrap items-center gap-6">
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded-full transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-thv26-acc before:opacity-0 before:scale-x-[.1] before:scale-y-[.4] before:transition-[transform,opacity] before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:opacity-100 hover:before:scale-100 focus-visible:before:opacity-100 focus-visible:before:scale-100 motion-reduce:before:transition-opacity">Explore</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded-full transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-thv26-acc before:opacity-0 before:scale-x-[.1] before:scale-y-[.4] before:transition-[transform,opacity] before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:opacity-100 hover:before:scale-100 focus-visible:before:opacity-100 focus-visible:before:scale-100 motion-reduce:before:transition-opacity">Gallery</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded-full transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-thv26-acc before:opacity-0 before:scale-x-[.1] before:scale-y-[.4] before:transition-[transform,opacity] before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:opacity-100 hover:before:scale-100 focus-visible:before:opacity-100 focus-visible:before:scale-100 motion-reduce:before:transition-opacity">Studio</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded-full transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-thv26-acc before:opacity-0 before:scale-x-[.1] before:scale-y-[.4] before:transition-[transform,opacity] before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:opacity-100 hover:before:scale-100 focus-visible:before:opacity-100 focus-visible:before:scale-100 motion-reduce:before:transition-opacity">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Pill Fill</span>
  </nav>

  <nav aria-label="Block fill" class="flex flex-wrap items-center gap-6">
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-thv26-acc before:origin-bottom before:scale-y-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-y-100 focus-visible:before:scale-y-100 motion-reduce:before:transition-none">Explore</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-thv26-acc before:origin-bottom before:scale-y-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-y-100 focus-visible:before:scale-y-100 motion-reduce:before:transition-none">Gallery</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-thv26-acc before:origin-bottom before:scale-y-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-y-100 focus-visible:before:scale-y-100 motion-reduce:before:transition-none">Studio</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-thv26-acc before:origin-bottom before:scale-y-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-y-100 focus-visible:before:scale-y-100 motion-reduce:before:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Block Fill</span>
  </nav>

  <nav aria-label="Gradient fill" class="flex flex-wrap items-center gap-6">
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:opacity-90 before:bg-[linear-gradient(135deg,#7c6af7,#f764a8)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Explore</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:opacity-90 before:bg-[linear-gradient(135deg,#7c6af7,#f764a8)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Gallery</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:opacity-90 before:bg-[linear-gradient(135deg,#7c6af7,#f764a8)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Studio</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline rounded transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:opacity-90 before:bg-[linear-gradient(135deg,#7c6af7,#f764a8)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Gradient Fill</span>
  </nav>

  <nav aria-label="Slash clip" class="flex flex-wrap items-center gap-6">
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-[#111111] focus-visible:text-[#111111] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-gold before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-thv26-gold before:[clip-path:polygon(8%_0%,100%_0%,92%_100%,0%_100%)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Explore</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-[#111111] focus-visible:text-[#111111] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-gold before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-thv26-gold before:[clip-path:polygon(8%_0%,100%_0%,92%_100%,0%_100%)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Gallery</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-[#111111] focus-visible:text-[#111111] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-gold before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-thv26-gold before:[clip-path:polygon(8%_0%,100%_0%,92%_100%,0%_100%)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Studio</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-[#111111] focus-visible:text-[#111111] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-gold before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-thv26-gold before:[clip-path:polygon(8%_0%,100%_0%,92%_100%,0%_100%)] before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Slash Clip</span>
  </nav>

  <nav aria-label="Radial spotlight" class="flex flex-wrap items-center gap-6">
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:opacity-0 before:scale-0 before:bg-[radial-gradient(ellipse_at_center,rgba(124,106,247,.7)_0%,transparent_72%)] before:transition-[transform,opacity] before:duration-300 hover:before:opacity-100 hover:before:scale-[2] focus-visible:before:opacity-100 focus-visible:before:scale-[2] motion-reduce:before:transition-opacity">Explore</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:opacity-0 before:scale-0 before:bg-[radial-gradient(ellipse_at_center,rgba(124,106,247,.7)_0%,transparent_72%)] before:transition-[transform,opacity] before:duration-300 hover:before:opacity-100 hover:before:scale-[2] focus-visible:before:opacity-100 focus-visible:before:scale-[2] motion-reduce:before:transition-opacity">Gallery</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:opacity-0 before:scale-0 before:bg-[radial-gradient(ellipse_at_center,rgba(124,106,247,.7)_0%,transparent_72%)] before:transition-[transform,opacity] before:duration-300 hover:before:opacity-100 hover:before:scale-[2] focus-visible:before:opacity-100 focus-visible:before:scale-[2] motion-reduce:before:transition-opacity">Studio</a>
    <a href="#" class="relative isolate px-3 py-1.5 text-[0.95rem] font-medium text-thv26-ink no-underline transition-colors duration-250 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-thv26-acc before:content-[''] before:absolute before:inset-0 before:-z-10 before:opacity-0 before:scale-0 before:bg-[radial-gradient(ellipse_at_center,rgba(124,106,247,.7)_0%,transparent_72%)] before:transition-[transform,opacity] before:duration-300 hover:before:opacity-100 hover:before:scale-[2] focus-visible:before:opacity-100 focus-visible:before:scale-[2] motion-reduce:before:transition-opacity">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Radial Spotlight</span>
  </nav>

  <nav aria-label="Invert blend" class="isolate flex flex-wrap items-center gap-6">
    <a href="#" class="relative px-3 py-1.5 text-[0.95rem] font-medium text-white no-underline rounded mix-blend-difference focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-white before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-white before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Explore</a>
    <a href="#" class="relative px-3 py-1.5 text-[0.95rem] font-medium text-white no-underline rounded mix-blend-difference focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-white before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-white before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Gallery</a>
    <a href="#" class="relative px-3 py-1.5 text-[0.95rem] font-medium text-white no-underline rounded mix-blend-difference focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-white before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-white before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Studio</a>
    <a href="#" class="relative px-3 py-1.5 text-[0.95rem] font-medium text-white no-underline rounded mix-blend-difference focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-white before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded before:bg-white before:origin-left before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 focus-visible:before:scale-x-100 motion-reduce:before:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv26-dim">Invert Blend</span>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-thv26-bg: #0a0a10;
  --color-thv26-bg: oklch(0.12 0.01 285);
  --color-thv26-ink: #c4c4cc;
  --color-thv26-ink: oklch(0.81 0.01 285);
  --color-thv26-dim: #8a8a96;
  --color-thv26-dim: oklch(0.64 0.01 285);
  --color-thv26-acc: #5b4fcf;
  --color-thv26-acc: oklch(0.5 0.2 285);
  --color-thv26-gold: #e8c840;
  --color-thv26-gold: oklch(0.84 0.15 95);
  --font-thv26-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

.thv-26 ::selection {
  background: var(--color-thv26-acc);
  color: #fff;
}
```

How this works

Fill first, text on top. Every link is relative isolate with a before:absolute before:inset-0 before:-z-10 fill. isolate is what keeps the negative z-index inside the link rather than behind the whole nav.

Six entrances, one property each. The pill scales both axes from a squashed rest state; the block scales Y from the bottom; the gradient scales X from the left; the spotlight scales a radial gradient up from zero. Same skeleton, one utility apart.

Invert is a blend, not a colour. mix-blend-difference on the label over a white fill flips the text automatically, so there is no hover:text-* to keep in sync.

Make it yours

  • Shape: rounded-full for a pill, rounded for a block, rounded-none for a slab.
  • Swap the gradient for brand colours in one arbitrary background.
  • Steepen the slash by editing the polygon's first and third stops.

Gotchas — read before shipping

  • Without isolate, before:-z-10 escapes and the fill paints behind the nav's own background.
  • mix-blend-difference needs an isolated ancestor; otherwise it composites against the page.
  • Filled links need a real contrast check in both states — the labels here go to white or near-black on hover, never a mid-grey.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

clip-path and mix-blend-mode are Baseline; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transformstw ↗mix-blend-modetw ↗

Arbitraryneeds bracket syntax

clip-pathtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →