33 Tailwind CSS Card Hover Effects
16 / 33

All 33 in 33 Tailwind CSS Card Hover Effects

  1. 01Tailwind 3D Tilt & Parallax Card with Depth Layers
  2. 02Tailwind Glowing Gradient & Glassmorphic Border Card
  3. 03Tailwind Image Zoom Card with Slide-Up Content Reveal
  4. 04Tailwind 3D Flip Card (Front to Back) with backface-visibility
  5. 05Tailwind Sibling De-emphasis Pricing Grid with has-hover
  6. 06Tailwind Minimalist Elevation Card with Layered Dynamic Shadows
  7. 07Tailwind Elastic Lift Card with Spring Cubic-Bezier
  8. 08Tailwind Animated Conic Gradient Border Card with @property
  9. 09Tailwind Stacked Layer Reveal Card (Fanned Risograph Deck)
  10. 10Tailwind Holographic Foil Shimmer Card with mix-blend-mode
  11. 11Tailwind Curtain Reveal Card (Parting Velvet Halves)
  12. 12Tailwind Corner Peel Card with clip-path Triangles
  13. 13Tailwind Neon Sign Card with Layered Text-Shadow Glow
  14. 14Tailwind CRT Scanline Terminal Card with Sweeping Beam
  15. 15Tailwind Depth Parallax Landscape Card with Layer Multipliers
  16. 16Tailwind Cursor Spotlight Card with Masked Border Highlight
  17. 17Tailwind 3D Tilt Product Card with Specular Glare
  18. 18Tailwind Slide-Up Panel Card with Peek Header Swap
  19. 19Tailwind Credit Card Flip with Magnetic Strip & CVV
  20. 20Tailwind RGB Channel-Split Glitch Card
  21. 21Tailwind Rotating Conic Aura Card with Blurred Gradient Bloom
  22. 22Tailwind Blob-to-Rectangle Border Morph Card
  23. 23Tailwind Magnetic Float Orb Card with Pointer Attraction
  24. 24Tailwind Typewriter Reveal Card with Steps Animation & Caret
  25. 25Tailwind Magazine Overlay Slide Card (Full-Face Panel Takeover)
  26. 26Tailwind Breathing Film Grain Card with SVG Turbulence Noise
  27. 27Tailwind Frosted Glass Intensify Card with Deepening Backdrop Blur
  28. 28Tailwind Blueprint Reveal Card with Circular clip-path Wipe
  29. 29Tailwind Cursor-Anchored Shockwave Ripple Card
  30. 30Tailwind Color-Burn Ignition Card with Grayscale-to-Fire Hover
  31. 31Tailwind Prismatic Light Sweep Card with Screen Blend Bar
  32. 32Tailwind Book Cover Open Card with Hinged 3D Rotation
  33. 33Tailwind Drifting Aurora Ribbons Card with Blurred Gradient Bands
Tailwind + JSMIT licensed

Tailwind Cursor Spotlight Card with Masked Border Highlight

The restrained one: a soft light and a matching border highlight track the cursor across a near-black surface, and nothing else moves. Two pseudo-elements read the same pair of custom properties, which is why the glow and the edge never drift apart.

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="tch-16 w-full min-h-svh grid place-items-center bg-tch16-bg font-tch16-mono p-8">
  <article data-tch16="root" class="group relative w-[340px] h-[440px] rounded-[18px] overflow-hidden cursor-pointer bg-tch16-card border border-white/6
    before:content-[''] before:absolute before:inset-0 before:z-1 before:pointer-events-none before:opacity-0 before:transition-opacity before:duration-400 group-hover:before:opacity-100 before:bg-[radial-gradient(300px_circle_at_var(--tch16-x,50%)_var(--tch16-y,50%),rgb(120_200_255/0.18),transparent_60%)]
    after:content-[''] after:absolute after:inset-0 after:z-2 after:rounded-[inherit] after:p-px after:pointer-events-none after:opacity-0 after:transition-opacity after:duration-400 group-hover:after:opacity-100 after:bg-[radial-gradient(250px_circle_at_var(--tch16-x,50%)_var(--tch16-y,50%),rgb(120_200_255/0.6),transparent_50%)] after:[-webkit-mask:linear-gradient(#000_0_0)_content-box,linear-gradient(#000_0_0)] after:[-webkit-mask-composite:xor] after:[mask-composite:exclude]">
    <div class="relative z-3 h-full p-[2.4rem] flex flex-col justify-between text-tch16-ink">
      <div class="flex justify-between text-[0.72rem] tracking-[0.1em] text-tch16-mut"><span>CASE STUDY</span><span>2025</span></div>
      <h2 class="font-tch16-display text-[3.4rem] leading-[0.95] text-tch16-head">Quiet<br><em class="text-tch16-light">Interfaces</em></h2>
      <p class="text-[0.82rem] leading-[1.65] text-tch16-body">A design system built on restraint. The light follows you because attention should follow intent.</p>
      <a href="#" class="inline-flex items-center min-h-11 text-[0.72rem] tracking-[0.12em] text-tch16-mut no-underline rounded transition-colors duration-200 hover:text-tch16-light focus-visible:outline-2 focus-visible:outline-tch16-light focus-visible:outline-offset-2">— READ THE ESSAY</a>
    </div>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tch16-bg: #08080a;
  --color-tch16-bg: oklch(0.1 0.003 285);
  --color-tch16-card: #101014;
  --color-tch16-card: oklch(0.15 0.005 285);
  --color-tch16-head: #f3f5f9;
  --color-tch16-head: oklch(0.97 0.004 265);
  --color-tch16-ink: #d7dbe2;
  --color-tch16-ink: oklch(0.88 0.008 265);
  --color-tch16-body: #8e94a3;
  --color-tch16-body: oklch(0.65 0.015 265);
  --color-tch16-mut: #6a7080;
  --color-tch16-mut: oklch(0.52 0.015 265);
  --color-tch16-light: #78c8ff;
  --color-tch16-light: oklch(0.81 0.12 232);
  --font-tch16-mono: 'Geist Mono', ui-monospace, monospace;
  --font-tch16-display: 'Instrument Serif', Georgia, serif;
}

.tch-16 {
  width: 100%;
  min-height: 100svh;
}
(() => {
  const root = document.querySelector('.tch-16');
  if (!root) return;
  const card = root.querySelector('[data-tch16="root"]');
  if (!card) return;
  if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;
  let frame = 0;
  card.addEventListener('mousemove', (e) => {
    if (frame) return;
    frame = requestAnimationFrame(() => {
      frame = 0;
      const r = card.getBoundingClientRect();
      card.style.setProperty('--tch16-x', '' + (e.clientX - r.left) + 'px');
      card.style.setProperty('--tch16-y', '' + (e.clientY - r.top) + 'px');
    });
  });
})();

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-tch16-bg: #08080a;
  --color-tch16-bg: oklch(0.1 0.003 285);
  --color-tch16-card: #101014;
  --color-tch16-card: oklch(0.15 0.005 285);
  --color-tch16-head: #f3f5f9;
  --color-tch16-head: oklch(0.97 0.004 265);
  --color-tch16-ink: #d7dbe2;
  --color-tch16-ink: oklch(0.88 0.008 265);
  --color-tch16-body: #8e94a3;
  --color-tch16-body: oklch(0.65 0.015 265);
  --color-tch16-mut: #6a7080;
  --color-tch16-mut: oklch(0.52 0.015 265);
  --color-tch16-light: #78c8ff;
  --color-tch16-light: oklch(0.81 0.12 232);
  --font-tch16-mono: 'Geist Mono', ui-monospace, monospace;
  --font-tch16-display: 'Instrument Serif', Georgia, serif;
}

.tch-16 {
  width: 100%;
  min-height: 100svh;
}
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=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@400;500&display=swap">

What changed in the port

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

  • Two pseudo-elements sharing two custom properties is the pattern this collection returns to three times (02, 08, 16). Once you have it, cursor-lit anything is a fifteen-minute job.
  • This demo needs no @theme animation entries and no keyframes — only colours and two fonts. The stylesheet is as small as a Tailwind port gets.
  • UI change from the CSS original: the footer is a real link with a 44px target and a focus ring, and the handler is rAF-throttled and pointer-guarded.
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 Cursor Spotlight Card with Masked Border Highlight
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-cursor-spotlight-card-border-highlight/

The restrained one: a soft light and a matching border highlight track the cursor across a near-black surface, and nothing else moves. Two pseudo-elements read the same pair of custom properties, which is why the glow and the edge never drift apart.
## HTML
```html
<section class="tch-16 w-full min-h-svh grid place-items-center bg-tch16-bg font-tch16-mono p-8">
  <article data-tch16="root" class="group relative w-[340px] h-[440px] rounded-[18px] overflow-hidden cursor-pointer bg-tch16-card border border-white/6
    before:content-[''] before:absolute before:inset-0 before:z-1 before:pointer-events-none before:opacity-0 before:transition-opacity before:duration-400 group-hover:before:opacity-100 before:bg-[radial-gradient(300px_circle_at_var(--tch16-x,50%)_var(--tch16-y,50%),rgb(120_200_255/0.18),transparent_60%)]
    after:content-[''] after:absolute after:inset-0 after:z-2 after:rounded-[inherit] after:p-px after:pointer-events-none after:opacity-0 after:transition-opacity after:duration-400 group-hover:after:opacity-100 after:bg-[radial-gradient(250px_circle_at_var(--tch16-x,50%)_var(--tch16-y,50%),rgb(120_200_255/0.6),transparent_50%)] after:[-webkit-mask:linear-gradient(#000_0_0)_content-box,linear-gradient(#000_0_0)] after:[-webkit-mask-composite:xor] after:[mask-composite:exclude]">
    <div class="relative z-3 h-full p-[2.4rem] flex flex-col justify-between text-tch16-ink">
      <div class="flex justify-between text-[0.72rem] tracking-[0.1em] text-tch16-mut"><span>CASE STUDY</span><span>2025</span></div>
      <h2 class="font-tch16-display text-[3.4rem] leading-[0.95] text-tch16-head">Quiet<br><em class="text-tch16-light">Interfaces</em></h2>
      <p class="text-[0.82rem] leading-[1.65] text-tch16-body">A design system built on restraint. The light follows you because attention should follow intent.</p>
      <a href="#" class="inline-flex items-center min-h-11 text-[0.72rem] tracking-[0.12em] text-tch16-mut no-underline rounded transition-colors duration-200 hover:text-tch16-light focus-visible:outline-2 focus-visible:outline-tch16-light focus-visible:outline-offset-2">— READ THE ESSAY</a>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch16-bg: #08080a;
  --color-tch16-bg: oklch(0.1 0.003 285);
  --color-tch16-card: #101014;
  --color-tch16-card: oklch(0.15 0.005 285);
  --color-tch16-head: #f3f5f9;
  --color-tch16-head: oklch(0.97 0.004 265);
  --color-tch16-ink: #d7dbe2;
  --color-tch16-ink: oklch(0.88 0.008 265);
  --color-tch16-body: #8e94a3;
  --color-tch16-body: oklch(0.65 0.015 265);
  --color-tch16-mut: #6a7080;
  --color-tch16-mut: oklch(0.52 0.015 265);
  --color-tch16-light: #78c8ff;
  --color-tch16-light: oklch(0.81 0.12 232);
  --font-tch16-mono: 'Geist Mono', ui-monospace, monospace;
  --font-tch16-display: 'Instrument Serif', Georgia, serif;
}

.tch-16 {
  width: 100%;
  min-height: 100svh;
}
```

## JavaScript
```js
(() => {
  const root = document.querySelector('.tch-16');
  if (!root) return;
  const card = root.querySelector('[data-tch16="root"]');
  if (!card) return;
  if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;
  let frame = 0;
  card.addEventListener('mousemove', (e) => {
    if (frame) return;
    frame = requestAnimationFrame(() => {
      frame = 0;
      const r = card.getBoundingClientRect();
      card.style.setProperty('--tch16-x', '' + (e.clientX - r.left) + 'px');
      card.style.setProperty('--tch16-y', '' + (e.clientY - r.top) + 'px');
    });
  });
})();
```

How this works

One pointer, two layers. The handler writes pixel offsets into --tch16-x and --tch16-y. The face glow is a 300px radial at that point; the border highlight is a 250px radial at the same point, masked down to a 1px ring. Because both read the same properties, the lit edge is always the edge nearest the light.

Opacity is the only transition. The gradients' positions update instantly — the pointer is already smooth — and only the fade in and out is animated. That is what keeps the effect feeling like light rather than like a chasing element.

Restraint is the design. No lift, no tilt, no scale. On a case-study card for a studio that sells calm, the absence is the point.

Make it yours

  • Spot size: the 300px and 250px radii. Smaller reads as a torch, larger as ambient light.
  • Tint: --color-tch16-light drives both layers — warm amber reads as lamplight, cool blue as screen glow.
  • Two-tone spotlight: add a second, tighter radial to the before: gradient for a hot core inside a soft halo.

Gotchas — read before shipping

  • Both overlays need pointer-events-none, or the glow layer swallows clicks on the card.
  • Keep peak glow opacity under ~0.25 so the body copy stays crisp under the light.
  • Guard on (hover: hover) and (pointer: fine); on touch the effect adds listeners and returns nothing.
  • Do not transition the gradient position. Tweening it lags the cursor and the illusion breaks immediately.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Custom properties and radial gradients are universal; the border ring needs mask-composite (Safari 15.4+, Firefox 120+) and degrades to a face-glow-only card.

Techniques used in this demo

Utilitiesfirst-class utility or variant

radial-gradient()tw ↗transitionstw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗

Arbitraryneeds bracket syntax

mask-compositetw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →