33 Tailwind CSS Card Hover Effects
02 / 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 Glowing Gradient & Glassmorphic Border Card

A dark staking-vault card on frosted glass: a teal-to-violet bloom rises behind the blur and a matching neon ring ignites on whichever edge the cursor is nearest. backdrop-blur-[14px] saturate-[1.3] is a clean utility win; the masked border ring is the part that has to stay arbitrary, and the class list says so honestly.

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-02 w-full min-h-svh grid place-items-center bg-tch02-bg bg-[radial-gradient(circle_at_25%_25%,#1a1140_0_20%,transparent_21%),radial-gradient(circle_at_80%_70%,#06343f_0_24%,transparent_25%)] font-tch02-sans p-8">
  <article data-tch02="root" class="group relative w-[340px] h-[440px] overflow-hidden rounded-[22px] cursor-pointer bg-white/5 backdrop-blur-[14px] saturate-[1.3] border border-white/10 shadow-[inset_0_0_0_1px_rgb(255_255_255/0.06)] transition-transform duration-400 hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0
    before:content-[''] before:absolute before:inset-0 before:z-0 before:opacity-0 before:transition-opacity before:duration-400 group-hover:before:opacity-100 before:bg-[radial-gradient(320px_circle_at_var(--tch02-x,50%)_var(--tch02-y,50%),rgb(0_240_200/0.35),rgb(120_80_255/0.18)_40%,transparent_65%)]
    after:content-[''] after:absolute after:inset-0 after:z-3 after:rounded-[inherit] after:p-[1.5px] after:pointer-events-none after:opacity-0 after:transition-opacity after:duration-400 group-hover:after:opacity-100 after:bg-[radial-gradient(260px_circle_at_var(--tch02-x,50%)_var(--tch02-y,50%),var(--color-tch02-acc-a),var(--color-tch02-acc-b)_45%,transparent_60%)] 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-2 h-full p-[2.2rem] flex flex-col justify-between text-tch02-ink">
      <div class="flex items-center justify-between">
        <div class="size-11 rounded-full bg-[conic-gradient(var(--color-tch02-acc-a),var(--color-tch02-acc-b),var(--color-tch02-acc-a))] shadow-[0_0_22px_rgb(0_240_200/0.4)]"></div>
        <span class="font-tch02-mono text-[0.7rem] tracking-[0.16em] text-tch02-mint border border-tch02-mint/35 px-2.5 py-1 rounded-full">// MAINNET</span>
      </div>
      <div>
        <p class="font-tch02-mono text-[0.74rem] tracking-[0.1em] text-tch02-mut">STAKED BALANCE</p>
        <p class="font-bold text-[2.8rem] leading-none bg-linear-to-r from-tch02-acc-a to-tch02-acc-b bg-clip-text text-transparent">48.20 Ξ</p>
      </div>
      <p class="text-[0.84rem] leading-[1.6] text-tch02-mut">Self-custody vault with live yield. The neon edge ignites and follows your cursor around the glass.</p>
      <a href="#" class="block text-center font-tch02-mono text-[0.82rem] tracking-[0.08em] min-h-11 py-3.5 rounded-xl no-underline bg-tch02-acc-a/12 border border-tch02-acc-a/30 text-tch02-btn transition-colors duration-200 hover:bg-tch02-acc-a/22 focus-visible:outline-2 focus-visible:outline-tch02-acc-a focus-visible:outline-offset-2">STAKE MORE →</a>
    </div>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tch02-bg: #06060e;
  --color-tch02-bg: oklch(0.09 0.02 285);
  --color-tch02-ink: #e8f7f4;
  --color-tch02-ink: oklch(0.96 0.02 175);
  --color-tch02-mut: #9aa6bf;
  --color-tch02-mut: oklch(0.71 0.03 265);
  --color-tch02-mint: #7af0db;
  --color-tch02-mint: oklch(0.88 0.11 175);
  --color-tch02-btn: #5ff5d8;
  --color-tch02-btn: oklch(0.89 0.14 175);
  --color-tch02-acc-a: #00f0c8;
  --color-tch02-acc-a: oklch(0.86 0.17 172);
  --color-tch02-acc-b: #7a50ff;
  --color-tch02-acc-b: oklch(0.56 0.25 285);
  --font-tch02-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tch02-mono: 'Azeret Mono', ui-monospace, monospace;
}

.tch-02 {
  width: 100%;
  min-height: 100svh;
}
(() => {
  const root = document.querySelector('.tch-02');
  if (!root) return;
  const card = root.querySelector('[data-tch02="root"]');
  if (!card) return;
  if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  card.addEventListener('mousemove', (e) => {
    const r = card.getBoundingClientRect();
    card.style.setProperty('--tch02-x', '' + (e.clientX - r.left) + 'px');
    card.style.setProperty('--tch02-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-tch02-bg: #06060e;
  --color-tch02-bg: oklch(0.09 0.02 285);
  --color-tch02-ink: #e8f7f4;
  --color-tch02-ink: oklch(0.96 0.02 175);
  --color-tch02-mut: #9aa6bf;
  --color-tch02-mut: oklch(0.71 0.03 265);
  --color-tch02-mint: #7af0db;
  --color-tch02-mint: oklch(0.88 0.11 175);
  --color-tch02-btn: #5ff5d8;
  --color-tch02-btn: oklch(0.89 0.14 175);
  --color-tch02-acc-a: #00f0c8;
  --color-tch02-acc-a: oklch(0.86 0.17 172);
  --color-tch02-acc-b: #7a50ff;
  --color-tch02-acc-b: oklch(0.56 0.25 285);
  --font-tch02-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tch02-mono: 'Azeret Mono', ui-monospace, monospace;
}

.tch-02 {
  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=Space+Grotesk:wght@400;500;700&family=Azeret+Mono:wght@400;500&display=swap">

What changed in the port

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

  • The glass itself ports perfectly — bg-white/5 backdrop-blur-[14px] saturate-[1.3] is shorter and clearer than the CSS it replaces.
  • The masked ring does not: three arbitrary properties including a WebKit shim. That is the honest answer for a technique with no utility, and putting it in after: keeps it adjacent to the bloom it pairs with.
  • UI change from the CSS original: the CTA is a real <a> with a 44px hit target and a focus ring instead of a decorative <div>, and an inset hairline keeps the glass edge visible on black.
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 Glowing Gradient & Glassmorphic Border Card
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-glowing-gradient-glassmorphic-border-card/

A dark staking-vault card on frosted glass: a teal-to-violet bloom rises behind the blur and a matching neon ring ignites on whichever edge the cursor is nearest. backdrop-blur-[14px] saturate-[1.3] is a clean utility win; the masked border ring is the part that has to stay arbitrary, and the class list says so honestly.
## HTML
```html
<section class="tch-02 w-full min-h-svh grid place-items-center bg-tch02-bg bg-[radial-gradient(circle_at_25%_25%,#1a1140_0_20%,transparent_21%),radial-gradient(circle_at_80%_70%,#06343f_0_24%,transparent_25%)] font-tch02-sans p-8">
  <article data-tch02="root" class="group relative w-[340px] h-[440px] overflow-hidden rounded-[22px] cursor-pointer bg-white/5 backdrop-blur-[14px] saturate-[1.3] border border-white/10 shadow-[inset_0_0_0_1px_rgb(255_255_255/0.06)] transition-transform duration-400 hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0
    before:content-[''] before:absolute before:inset-0 before:z-0 before:opacity-0 before:transition-opacity before:duration-400 group-hover:before:opacity-100 before:bg-[radial-gradient(320px_circle_at_var(--tch02-x,50%)_var(--tch02-y,50%),rgb(0_240_200/0.35),rgb(120_80_255/0.18)_40%,transparent_65%)]
    after:content-[''] after:absolute after:inset-0 after:z-3 after:rounded-[inherit] after:p-[1.5px] after:pointer-events-none after:opacity-0 after:transition-opacity after:duration-400 group-hover:after:opacity-100 after:bg-[radial-gradient(260px_circle_at_var(--tch02-x,50%)_var(--tch02-y,50%),var(--color-tch02-acc-a),var(--color-tch02-acc-b)_45%,transparent_60%)] 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-2 h-full p-[2.2rem] flex flex-col justify-between text-tch02-ink">
      <div class="flex items-center justify-between">
        <div class="size-11 rounded-full bg-[conic-gradient(var(--color-tch02-acc-a),var(--color-tch02-acc-b),var(--color-tch02-acc-a))] shadow-[0_0_22px_rgb(0_240_200/0.4)]"></div>
        <span class="font-tch02-mono text-[0.7rem] tracking-[0.16em] text-tch02-mint border border-tch02-mint/35 px-2.5 py-1 rounded-full">// MAINNET</span>
      </div>
      <div>
        <p class="font-tch02-mono text-[0.74rem] tracking-[0.1em] text-tch02-mut">STAKED BALANCE</p>
        <p class="font-bold text-[2.8rem] leading-none bg-linear-to-r from-tch02-acc-a to-tch02-acc-b bg-clip-text text-transparent">48.20 Ξ</p>
      </div>
      <p class="text-[0.84rem] leading-[1.6] text-tch02-mut">Self-custody vault with live yield. The neon edge ignites and follows your cursor around the glass.</p>
      <a href="#" class="block text-center font-tch02-mono text-[0.82rem] tracking-[0.08em] min-h-11 py-3.5 rounded-xl no-underline bg-tch02-acc-a/12 border border-tch02-acc-a/30 text-tch02-btn transition-colors duration-200 hover:bg-tch02-acc-a/22 focus-visible:outline-2 focus-visible:outline-tch02-acc-a focus-visible:outline-offset-2">STAKE MORE →</a>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch02-bg: #06060e;
  --color-tch02-bg: oklch(0.09 0.02 285);
  --color-tch02-ink: #e8f7f4;
  --color-tch02-ink: oklch(0.96 0.02 175);
  --color-tch02-mut: #9aa6bf;
  --color-tch02-mut: oklch(0.71 0.03 265);
  --color-tch02-mint: #7af0db;
  --color-tch02-mint: oklch(0.88 0.11 175);
  --color-tch02-btn: #5ff5d8;
  --color-tch02-btn: oklch(0.89 0.14 175);
  --color-tch02-acc-a: #00f0c8;
  --color-tch02-acc-a: oklch(0.86 0.17 172);
  --color-tch02-acc-b: #7a50ff;
  --color-tch02-acc-b: oklch(0.56 0.25 285);
  --font-tch02-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tch02-mono: 'Azeret Mono', ui-monospace, monospace;
}

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

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

How this works

Glass is three utilities. A translucent background, a backdrop blur with a saturation bump, and a hairline border. Nothing here needed a custom rule — and because the blur is a utility, the intensity is tunable in the markup rather than in a stylesheet two files away.

Both glow layers are pseudo-elements on the same card. before: paints a 320px radial bloom at the pointer, behind the content; after: paints a 260px radial in the ring's gradient and is then masked to the border area only, so the card face stays clean. Each fades in with group-hover:opacity-100.

Ten lines of JS, two properties. The handler writes pixel offsets into --tch02-x and --tch02-y and touches nothing else — both the bloom and the ring read them, which is why they stay locked together as the pointer moves.

Make it yours

  • Ring and bloom hues come from --color-tch02-acc-a / --color-tch02-acc-b; the balance gradient reads the same pair.
  • Frost intensity: backdrop-blur-[14px] → [8px] for subtle, [40px] for heavy.
  • Delete the after: ring utilities entirely for a bloom-only glass card — the effect degrades to something still worth shipping.

Gotchas — read before shipping

  • backdrop-blur only blurs what is actually behind the element; on a flat single-tone page the glass reads as nothing. The stage keeps two radial gradients for that reason.
  • mask-composite needs Safari 15.4+ / Firefox 120+, so the -webkit-mask-composite:xor shim ships alongside — without the ring, the card still works.
  • Cap glass cards per fold; stacked backdrop-filter layers are the most expensive thing in this collection on mobile GPUs.
  • Write the mask as arbitrary properties, not as mask-* utilities — v4's mask utilities do not compose the two-layer content-box/border-box trick this ring needs.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter is Baseline. The border ring needs mask-composite (Chrome 120+, Safari 15.4+, Firefox 120+); older browsers show the glass and bloom without the ring.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗conic-gradient()tw ↗background-clip: texttw ↗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 →