33 Tailwind CSS Card Hover Effects
15 / 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 Depth Parallax Landscape Card with Layer Multipliers

A dawn-trek card whose ridgelines, sun and foreground hills drift at different rates as the cursor moves. The scene is four gradient layers — no images — and the depth contract lives in data-depth attributes the JS reads, so adding a layer means adding one number.

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-15 w-full min-h-svh grid place-items-center bg-tch15-bg font-tch15-sans p-8 [perspective:1000px]">
  <article data-tch15="root" tabindex="0" class="relative w-[340px] h-[440px] rounded-[22px] overflow-hidden cursor-pointer outline-none transform-3d bg-linear-to-b from-tch15-sky to-tch15-bg shadow-[0_20px_50px_rgb(0_0_0/0.45)] transition-transform duration-200 ease-out focus-visible:outline-3 focus-visible:outline-tch15-sun focus-visible:outline-offset-4 *:absolute *:inset-0 *:transition-transform *:duration-200 *:ease-out *:will-change-transform motion-reduce:transition-none motion-reduce:*:transition-none">
    <div data-depth="8" class="opacity-90 bg-[radial-gradient(circle_at_20%_70%,#1b4a63_0_28%,transparent_29%),radial-gradient(circle_at_70%_75%,#1b4a63_0_32%,transparent_33%)]"></div>
    <div data-depth="16" class="grid place-items-center">
      <div class="size-[130px] -mt-15 rounded-full bg-[radial-gradient(circle,#ffd56b,#ff8c42)] shadow-[0_0_60px_rgb(255_170_80/0.6)]"></div>
    </div>
    <div data-depth="28" class="bg-[radial-gradient(ellipse_120%_60%_at_30%_110%,#06222e_60%,transparent_61%),radial-gradient(ellipse_120%_50%_at_80%_115%,#04161e_60%,transparent_61%)]"></div>
    <div data-depth="40" class="z-5 p-[2.2rem] flex flex-col justify-end text-tch15-ink">
      <span class="text-[0.72rem] tracking-[0.28em] uppercase text-tch15-sun">Field Notes</span>
      <h2 class="font-tch15-display font-extrabold text-[2.6rem] leading-[0.95] mt-1.5 mb-2">Valley of<br>Long Light</h2>
      <p class="text-[0.85rem] leading-[1.6] text-tch15-body">A guided dawn trek through layered ridgelines. Move your cursor to feel the depth.</p>
    </div>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tch15-bg: #0b1d2a;
  --color-tch15-bg: oklch(0.23 0.04 240);
  --color-tch15-sky: #2c6e8f;
  --color-tch15-sky: oklch(0.52 0.08 235);
  --color-tch15-ink: #eaf4fa;
  --color-tch15-ink: oklch(0.96 0.01 230);
  --color-tch15-body: #b9d0dd;
  --color-tch15-body: oklch(0.83 0.03 230);
  --color-tch15-sun: #ffd56b;
  --color-tch15-sun: oklch(0.88 0.13 85);
  --font-tch15-sans: 'Inter Tight', system-ui, sans-serif;
  --font-tch15-display: 'Bricolage Grotesque', system-ui, sans-serif;
}

.tch-15 {
  width: 100%;
  min-height: 100svh;
}
(() => {
  const root = document.querySelector('.tch-15');
  if (!root) return;
  const card = root.querySelector('[data-tch15="root"]');
  if (!card) return;
  if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  const layers = card.querySelectorAll('[data-depth]');
  let frame = 0;
  card.addEventListener('mousemove', (e) => {
    if (frame) return;
    frame = requestAnimationFrame(() => {
      frame = 0;
      const r = card.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      card.style.transform = 'rotateY(' + (x * 10) + 'deg) rotateX(' + (-y * 10) + 'deg)';
      layers.forEach((l) => {
        const d = parseFloat(l.dataset.depth);
        l.style.transform = 'translate(' + (-x * d) + 'px, ' + (-y * d) + 'px)';
      });
    });
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'rotateY(0deg) rotateX(0deg)';
    layers.forEach((l) => { l.style.transform = 'translate(0,0)'; });
  });
})();

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-tch15-bg: #0b1d2a;
  --color-tch15-bg: oklch(0.23 0.04 240);
  --color-tch15-sky: #2c6e8f;
  --color-tch15-sky: oklch(0.52 0.08 235);
  --color-tch15-ink: #eaf4fa;
  --color-tch15-ink: oklch(0.96 0.01 230);
  --color-tch15-body: #b9d0dd;
  --color-tch15-body: oklch(0.83 0.03 230);
  --color-tch15-sun: #ffd56b;
  --color-tch15-sun: oklch(0.88 0.13 85);
  --font-tch15-sans: 'Inter Tight', system-ui, sans-serif;
  --font-tch15-display: 'Bricolage Grotesque', system-ui, sans-serif;
}

.tch-15 {
  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=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,800&family=Inter+Tight:wght@400;600&display=swap">

What changed in the port

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

  • *:absolute *:inset-0 *:transition-transform replaces the CSS version's .layer class entirely — the layers now need no class of their own beyond their gradient and their data-depth.
  • Keeping depth in a data attribute rather than in per-layer classes means the JS and the markup agree by construction; there is no second place where 28 could become 26.
  • UI change from the CSS original: rAF throttling and hard guards on pointer type and reduced motion (the original attached unconditionally), plus a focusable card with a visible ring.
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 Depth Parallax Landscape Card with Layer Multipliers
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-depth-parallax-landscape-card/

A dawn-trek card whose ridgelines, sun and foreground hills drift at different rates as the cursor moves. The scene is four gradient layers &mdash; no images &mdash; and the depth contract lives in data-depth attributes the JS reads, so adding a layer means adding one number.
## HTML
```html
<section class="tch-15 w-full min-h-svh grid place-items-center bg-tch15-bg font-tch15-sans p-8 [perspective:1000px]">
  <article data-tch15="root" tabindex="0" class="relative w-[340px] h-[440px] rounded-[22px] overflow-hidden cursor-pointer outline-none transform-3d bg-linear-to-b from-tch15-sky to-tch15-bg shadow-[0_20px_50px_rgb(0_0_0/0.45)] transition-transform duration-200 ease-out focus-visible:outline-3 focus-visible:outline-tch15-sun focus-visible:outline-offset-4 *:absolute *:inset-0 *:transition-transform *:duration-200 *:ease-out *:will-change-transform motion-reduce:transition-none motion-reduce:*:transition-none">
    <div data-depth="8" class="opacity-90 bg-[radial-gradient(circle_at_20%_70%,#1b4a63_0_28%,transparent_29%),radial-gradient(circle_at_70%_75%,#1b4a63_0_32%,transparent_33%)]"></div>
    <div data-depth="16" class="grid place-items-center">
      <div class="size-[130px] -mt-15 rounded-full bg-[radial-gradient(circle,#ffd56b,#ff8c42)] shadow-[0_0_60px_rgb(255_170_80/0.6)]"></div>
    </div>
    <div data-depth="28" class="bg-[radial-gradient(ellipse_120%_60%_at_30%_110%,#06222e_60%,transparent_61%),radial-gradient(ellipse_120%_50%_at_80%_115%,#04161e_60%,transparent_61%)]"></div>
    <div data-depth="40" class="z-5 p-[2.2rem] flex flex-col justify-end text-tch15-ink">
      <span class="text-[0.72rem] tracking-[0.28em] uppercase text-tch15-sun">Field Notes</span>
      <h2 class="font-tch15-display font-extrabold text-[2.6rem] leading-[0.95] mt-1.5 mb-2">Valley of<br>Long Light</h2>
      <p class="text-[0.85rem] leading-[1.6] text-tch15-body">A guided dawn trek through layered ridgelines. Move your cursor to feel the depth.</p>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch15-bg: #0b1d2a;
  --color-tch15-bg: oklch(0.23 0.04 240);
  --color-tch15-sky: #2c6e8f;
  --color-tch15-sky: oklch(0.52 0.08 235);
  --color-tch15-ink: #eaf4fa;
  --color-tch15-ink: oklch(0.96 0.01 230);
  --color-tch15-body: #b9d0dd;
  --color-tch15-body: oklch(0.83 0.03 230);
  --color-tch15-sun: #ffd56b;
  --color-tch15-sun: oklch(0.88 0.13 85);
  --font-tch15-sans: 'Inter Tight', system-ui, sans-serif;
  --font-tch15-display: 'Bricolage Grotesque', system-ui, sans-serif;
}

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

## JavaScript
```js
(() => {
  const root = document.querySelector('.tch-15');
  if (!root) return;
  const card = root.querySelector('[data-tch15="root"]');
  if (!card) return;
  if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  const layers = card.querySelectorAll('[data-depth]');
  let frame = 0;
  card.addEventListener('mousemove', (e) => {
    if (frame) return;
    frame = requestAnimationFrame(() => {
      frame = 0;
      const r = card.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      card.style.transform = 'rotateY(' + (x * 10) + 'deg) rotateX(' + (-y * 10) + 'deg)';
      layers.forEach((l) => {
        const d = parseFloat(l.dataset.depth);
        l.style.transform = 'translate(' + (-x * d) + 'px, ' + (-y * d) + 'px)';
      });
    });
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'rotateY(0deg) rotateX(0deg)';
    layers.forEach((l) => { l.style.transform = 'translate(0,0)'; });
  });
})();
```

How this works

Depth is data, not CSS. Each layer declares data-depth="8", 16, 28, 40. The handler normalises the pointer to -0.5…0.5 and translates each layer by -x * depth. Differential rate is the entire illusion, and it is tunable per layer without touching a class.

The card tilts too. A gentle 10° rotateY/rotateX on the card under [perspective:1000px] sits under the layer drift, so the scene leans as well as slides.

The scene is gradients. Far ridges are two radials, the sun is a radial orb with a glow shadow, the near hills are two wide ellipses. Cheap, sharp at any DPI, and rethemeable from tokens.

Make it yours

  • Depth spread: keep the ratios and scale them — 8/16/28/40 is pronounced, halve them all for restrained.
  • Add depth-of-field with blur-[1px] on the far layer so it reads as genuinely behind.
  • Retheme sky, ridge and sun from the four @theme colours; a dusk palette needs no structural change.

Gotchas — read before shipping

  • Throttle with requestAnimationFrame. Writing four transforms per raw mousemove is the fastest way to make a nice effect feel cheap.
  • Guard on (hover: hover) and (pointer: fine) — synthetic touch mousemove makes the layers twitch.
  • will-change-transform is applied to the four layers only, not the card; blanket will-change costs more than it returns.
  • Parallax is decoration. Any focusable child still needs its own visible focus ring.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Custom properties, 3D transforms and pointer events are universally supported; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

perspectivetw ↗radial-gradient()tw ↗prefers-reduced-motiontw ↗will changetw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →