33 Tailwind CSS Card Hover Effects
08 / 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
Pure TailwindMIT licensed

Tailwind Animated Conic Gradient Border Card with @property

A dark edge-compute card where a multi-colour conic gradient traces a live circuit around the border on hover. This is the port's honest limit: @property and @keyframes must stay in the stylesheet, but --animate-tch08-spin turns the result into one animate-tch08-spin utility, and the play-state gating happens in the class list.

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-08 w-full min-h-svh grid place-items-center bg-tch08-bg font-tch08-mono p-8">
  <article class="group relative w-[340px] h-[420px] rounded-[20px] bg-tch08-card isolate cursor-pointer
    before:content-[''] before:absolute before:inset-0 before:rounded-[inherit] before:p-[2px] before:opacity-0 before:transition-opacity before:duration-400 group-hover:before:opacity-100 group-focus-within:before:opacity-100 before:bg-[conic-gradient(from_var(--tch08-angle,0deg),transparent_0deg,transparent_70deg,var(--color-tch08-a)_130deg,var(--color-tch08-b)_200deg,var(--color-tch08-c)_250deg,transparent_320deg)] before:[-webkit-mask:linear-gradient(#000_0_0)_content-box,linear-gradient(#000_0_0)] before:[-webkit-mask-composite:xor] before:[mask-composite:exclude] before:animate-tch08-spin before:[animation-play-state:paused] group-hover:before:[animation-play-state:running] motion-reduce:before:animate-none
    after:content-[''] after:absolute after:inset-0 after:rounded-[inherit] after:border-2 after:border-white/6 after:pointer-events-none">
    <div class="relative z-2 h-full p-[2.4rem] flex flex-col justify-between text-tch08-ink">
      <span class="text-[0.7rem] tracking-[0.3em] uppercase text-tch08-mut">/ Edge Compute</span>
      <h2 class="font-tch08-display font-extrabold text-[2.3rem] leading-[1.05] bg-linear-to-r from-tch08-a via-tch08-b to-tch08-c bg-clip-text text-transparent">Halo<br>Runtime</h2>
      <p class="text-[0.82rem] leading-[1.65] text-tch08-body">A serverless mesh that traces a live circuit around every active deployment region.</p>
      <a href="#" class="flex items-center justify-between min-h-11 text-[0.72rem] text-tch08-mut no-underline border-t border-white/8 pt-4 transition-colors duration-200 hover:text-tch08-ink focus-visible:outline-2 focus-visible:outline-tch08-a focus-visible:outline-offset-2"><span>v3.2.0</span><span>99.99% SLA</span></a>
    </div>
  </article>
</section>
@import "tailwindcss";

@property --tch08-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes tch08-spin {
  to {
    --tch08-angle: 360deg;
  }
}

@theme {
  --color-tch08-bg: #07080d;
  --color-tch08-bg: oklch(0.09 0.01 265);
  --color-tch08-card: #0d0f17;
  --color-tch08-card: oklch(0.14 0.015 265);
  --color-tch08-ink: #e8eaf2;
  --color-tch08-ink: oklch(0.93 0.008 265);
  --color-tch08-body: #9499ab;
  --color-tch08-body: oklch(0.68 0.015 265);
  --color-tch08-mut: #6f7488;
  --color-tch08-mut: oklch(0.54 0.02 265);
  --color-tch08-a: #00f0ff;
  --color-tch08-a: oklch(0.87 0.14 200);
  --color-tch08-b: #7b5cff;
  --color-tch08-b: oklch(0.58 0.24 285);
  --color-tch08-c: #ff4dd8;
  --color-tch08-c: oklch(0.7 0.27 335);
  --font-tch08-mono: 'DM Mono', ui-monospace, monospace;
  --font-tch08-display: 'Syne', system-ui, sans-serif;
  --animate-tch08-spin: tch08-spin 4s linear infinite;
}

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

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";

@property --tch08-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes tch08-spin {
  to {
    --tch08-angle: 360deg;
  }
}

@theme {
  --color-tch08-bg: #07080d;
  --color-tch08-bg: oklch(0.09 0.01 265);
  --color-tch08-card: #0d0f17;
  --color-tch08-card: oklch(0.14 0.015 265);
  --color-tch08-ink: #e8eaf2;
  --color-tch08-ink: oklch(0.93 0.008 265);
  --color-tch08-body: #9499ab;
  --color-tch08-body: oklch(0.68 0.015 265);
  --color-tch08-mut: #6f7488;
  --color-tch08-mut: oklch(0.54 0.02 265);
  --color-tch08-a: #00f0ff;
  --color-tch08-a: oklch(0.87 0.14 200);
  --color-tch08-b: #7b5cff;
  --color-tch08-b: oklch(0.58 0.24 285);
  --color-tch08-c: #ff4dd8;
  --color-tch08-c: oklch(0.7 0.27 335);
  --font-tch08-mono: 'DM Mono', ui-monospace, monospace;
  --font-tch08-display: 'Syne', system-ui, sans-serif;
  --animate-tch08-spin: tch08-spin 4s linear infinite;
}

.tch-08 {
  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=Syne:wght@600;800&family=DM+Mono:wght@400;500&display=swap">

What changed in the port

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

  • @property plus @keyframes stay in CSS; --animate-* in @theme is the bridge that hands the result back to the markup as one utility.
  • Paused-at-rest is a deliberate port decision. Adding animate-* on hover restarts the sweep; flipping [animation-play-state:…] resumes it where it was.
  • UI change from the CSS original: the meta row is now a focusable link with a group-focus-within: ring trigger, so the border ignites for keyboard users too.
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 Animated Conic Gradient Border Card with @property
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-animated-gradient-border-draw-card/

A dark edge-compute card where a multi-colour conic gradient traces a live circuit around the border on hover. This is the port's honest limit: @property and @keyframes must stay in the stylesheet, but --animate-tch08-spin turns the result into one animate-tch08-spin utility, and the play-state gating happens in the class list.
## HTML
```html
<section class="tch-08 w-full min-h-svh grid place-items-center bg-tch08-bg font-tch08-mono p-8">
  <article class="group relative w-[340px] h-[420px] rounded-[20px] bg-tch08-card isolate cursor-pointer
    before:content-[''] before:absolute before:inset-0 before:rounded-[inherit] before:p-[2px] before:opacity-0 before:transition-opacity before:duration-400 group-hover:before:opacity-100 group-focus-within:before:opacity-100 before:bg-[conic-gradient(from_var(--tch08-angle,0deg),transparent_0deg,transparent_70deg,var(--color-tch08-a)_130deg,var(--color-tch08-b)_200deg,var(--color-tch08-c)_250deg,transparent_320deg)] before:[-webkit-mask:linear-gradient(#000_0_0)_content-box,linear-gradient(#000_0_0)] before:[-webkit-mask-composite:xor] before:[mask-composite:exclude] before:animate-tch08-spin before:[animation-play-state:paused] group-hover:before:[animation-play-state:running] motion-reduce:before:animate-none
    after:content-[''] after:absolute after:inset-0 after:rounded-[inherit] after:border-2 after:border-white/6 after:pointer-events-none">
    <div class="relative z-2 h-full p-[2.4rem] flex flex-col justify-between text-tch08-ink">
      <span class="text-[0.7rem] tracking-[0.3em] uppercase text-tch08-mut">/ Edge Compute</span>
      <h2 class="font-tch08-display font-extrabold text-[2.3rem] leading-[1.05] bg-linear-to-r from-tch08-a via-tch08-b to-tch08-c bg-clip-text text-transparent">Halo<br>Runtime</h2>
      <p class="text-[0.82rem] leading-[1.65] text-tch08-body">A serverless mesh that traces a live circuit around every active deployment region.</p>
      <a href="#" class="flex items-center justify-between min-h-11 text-[0.72rem] text-tch08-mut no-underline border-t border-white/8 pt-4 transition-colors duration-200 hover:text-tch08-ink focus-visible:outline-2 focus-visible:outline-tch08-a focus-visible:outline-offset-2"><span>v3.2.0</span><span>99.99% SLA</span></a>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@property --tch08-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes tch08-spin {
  to {
    --tch08-angle: 360deg;
  }
}

@theme {
  --color-tch08-bg: #07080d;
  --color-tch08-bg: oklch(0.09 0.01 265);
  --color-tch08-card: #0d0f17;
  --color-tch08-card: oklch(0.14 0.015 265);
  --color-tch08-ink: #e8eaf2;
  --color-tch08-ink: oklch(0.93 0.008 265);
  --color-tch08-body: #9499ab;
  --color-tch08-body: oklch(0.68 0.015 265);
  --color-tch08-mut: #6f7488;
  --color-tch08-mut: oklch(0.54 0.02 265);
  --color-tch08-a: #00f0ff;
  --color-tch08-a: oklch(0.87 0.14 200);
  --color-tch08-b: #7b5cff;
  --color-tch08-b: oklch(0.58 0.24 285);
  --color-tch08-c: #ff4dd8;
  --color-tch08-c: oklch(0.7 0.27 335);
  --font-tch08-mono: 'DM Mono', ui-monospace, monospace;
  --font-tch08-display: 'Syne', system-ui, sans-serif;
  --animate-tch08-spin: tch08-spin 4s linear infinite;
}

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

How this works

Registration is what makes the angle animatable. An unregistered custom property is a string, and strings do not tween. @property --tch08-angle { syntax: '<angle>' } gives it a type, and from that point a keyframe from 0deg to 360deg interpolates.

The animation becomes a utility. --animate-tch08-spin: tch08-spin 4s linear infinite in @theme mints animate-tch08-spin. It is applied at rest but paused, then hover flips the play-state — cheaper and smoother than adding the animation on hover, which restarts it from 0deg every time.

The ring is masked to the border only. Two mask layers, one clipped to the content box, composited with exclude, leave only the padding ring painted. The card face stays untouched.

Make it yours

  • Ring thickness is the after:p-[2px] value; hairline at 1px, heavy at 4px.
  • Speed: change the duration inside --animate-tch08-spin — 4s calm, 1.5s energetic.
  • Swap conic-gradient for linear-gradient and the circuit becomes a single sweeping stripe.

Gotchas — read before shipping

  • @property and @keyframes cannot be expressed as utilities. Do not try — put them in the stylesheet and expose only the result through @theme.
  • Pause rather than attach: group-hover:animate-* restarts the sweep from its first keyframe on every hover, which looks like a stutter.
  • Keep the transparent arc in the gradient (transparent 0deg 70deg) — a fully opaque ring has no visible head and the rotation disappears.
  • motion-reduce: must kill the animation, not slow it; a continuously rotating border is exactly what the preference is about.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

@property is the gate (Chrome 85, Safari 16.4, Firefox 128) and Tailwind v4 requires it anyway. Without it the ring shows at its initial angle without rotating.

Techniques used in this demo

Utilitiesfirst-class utility or variant

conic-gradient()tw ↗background-clip: texttw ↗prefers-reduced-motiontw ↗

Arbitraryneeds bracket syntax

mask-compositetw ↗

Plain CSSno Tailwind surface

@propertytw ↗@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →