33 Tailwind CSS Card Hover Effects
04 / 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 3D Flip Card (Front to Back) with backface-visibility

A team-profile card that turns a full 180° to swap a photo-and-name front for a bio-and-links back. v4 is the first version where this port is genuinely tidy: transform-3d, rotate-y-180 and backface-hidden are all real utilities, so only perspective stays arbitrary.

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-04 w-full min-h-svh grid place-items-center bg-tch04-bg bg-[radial-gradient(circle_at_70%_20%,#f6f4ee,#dcd9cf)] font-tch04-sans p-8 [perspective:1600px]">
  <div class="group w-[320px] h-[430px] cursor-pointer">
    <div class="relative size-full transform-3d transition-transform duration-700 ease-[cubic-bezier(0.4,0.15,0.2,1)] group-hover:rotate-y-180 group-focus-within:rotate-y-180 motion-reduce:transition-none motion-reduce:group-hover:rotate-y-0 motion-reduce:group-focus-within:rotate-y-0">
      <div class="absolute inset-0 rounded-3xl overflow-hidden backface-hidden shadow-[0_20px_45px_rgb(60_55_40/0.2)] bg-[linear-gradient(165deg,var(--color-tch04-front-a),var(--color-tch04-front-b))] flex flex-col justify-end p-[2.2rem] text-tch04-front-ink motion-reduce:transition-opacity motion-reduce:duration-300 motion-reduce:group-hover:opacity-0 motion-reduce:group-focus-within:opacity-0 before:content-[''] before:absolute before:-top-[10%] before:left-1/2 before:size-[200px] before:-translate-x-1/2 before:rounded-full before:bg-[radial-gradient(circle_at_40%_35%,#d8f5ee,#6cc4b4)] before:shadow-[0_20px_50px_rgb(0_0_0/0.2)]">
        <span class="relative text-[0.7rem] tracking-[0.22em] uppercase text-tch04-front-mut">Lead Designer</span>
        <h2 class="relative font-tch04-display font-extrabold text-[2.2rem] leading-none mt-1">Mara<br>Okonkwo</h2>
        <span class="relative mt-4 text-[0.74rem] text-tch04-front-mut">↻ hover or focus to flip</span>
      </div>
      <div class="absolute inset-0 rounded-3xl overflow-hidden backface-hidden rotate-y-180 shadow-[0_20px_45px_rgb(60_55_40/0.2)] bg-[linear-gradient(165deg,#1c1b1a,#0f0e0d)] p-[2.2rem] flex flex-col justify-between text-tch04-back-ink pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto motion-reduce:rotate-y-0 motion-reduce:opacity-0 motion-reduce:transition-opacity motion-reduce:duration-300 motion-reduce:group-hover:opacity-100 motion-reduce:group-focus-within:opacity-100">
        <div>
          <span class="text-[0.7rem] tracking-[0.22em] uppercase text-tch04-acc">Lead Designer</span>
          <h3 class="font-tch04-display font-extrabold text-[1.7rem] leading-[1.05] mt-1 mb-3.5">Mara Okonkwo</h3>
          <p class="text-[0.85rem] leading-[1.6] text-tch04-back-mut">Twelve years shaping product systems for fintech and health. Obsessed with motion, type, and the space between clicks.</p>
        </div>
        <div class="flex gap-2.5">
          <a href="#" class="flex-1 flex items-center justify-center min-h-11 rounded-[10px] border border-white/20 text-[0.78rem] font-medium text-tch04-back-ink no-underline transition-colors duration-300 hover:bg-tch04-acc/20 focus-visible:outline-2 focus-visible:outline-tch04-acc focus-visible:outline-offset-2">Email</a>
          <a href="#" class="flex-1 flex items-center justify-center min-h-11 rounded-[10px] border border-white/20 text-[0.78rem] font-medium text-tch04-back-ink no-underline transition-colors duration-300 hover:bg-tch04-acc/20 focus-visible:outline-2 focus-visible:outline-tch04-acc focus-visible:outline-offset-2">Dribbble</a>
          <a href="#" class="flex-1 flex items-center justify-center min-h-11 rounded-[10px] border border-white/20 text-[0.78rem] font-medium text-tch04-back-ink no-underline transition-colors duration-300 hover:bg-tch04-acc/20 focus-visible:outline-2 focus-visible:outline-tch04-acc focus-visible:outline-offset-2">LinkedIn</a>
        </div>
      </div>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tch04-bg: #eceae3;
  --color-tch04-bg: oklch(0.93 0.008 95);
  --color-tch04-front-a: #2f9e8f;
  --color-tch04-front-a: oklch(0.63 0.1 178);
  --color-tch04-front-b: #145c52;
  --color-tch04-front-b: oklch(0.42 0.08 178);
  --color-tch04-front-ink: #f2fbf9;
  --color-tch04-front-ink: oklch(0.98 0.01 178);
  --color-tch04-front-mut: #aef0e3;
  --color-tch04-front-mut: oklch(0.91 0.07 172);
  --color-tch04-back-ink: #ece9e2;
  --color-tch04-back-ink: oklch(0.93 0.008 85);
  --color-tch04-back-mut: #b3afa6;
  --color-tch04-back-mut: oklch(0.73 0.01 85);
  --color-tch04-acc: #5fd3c0;
  --color-tch04-acc: oklch(0.81 0.1 175);
  --font-tch04-sans: 'DM Sans', system-ui, sans-serif;
  --font-tch04-display: 'Bricolage Grotesque', system-ui, sans-serif;
}

.tch-04 {
  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";

@theme {
  --color-tch04-bg: #eceae3;
  --color-tch04-bg: oklch(0.93 0.008 95);
  --color-tch04-front-a: #2f9e8f;
  --color-tch04-front-a: oklch(0.63 0.1 178);
  --color-tch04-front-b: #145c52;
  --color-tch04-front-b: oklch(0.42 0.08 178);
  --color-tch04-front-ink: #f2fbf9;
  --color-tch04-front-ink: oklch(0.98 0.01 178);
  --color-tch04-front-mut: #aef0e3;
  --color-tch04-front-mut: oklch(0.91 0.07 172);
  --color-tch04-back-ink: #ece9e2;
  --color-tch04-back-ink: oklch(0.93 0.008 85);
  --color-tch04-back-mut: #b3afa6;
  --color-tch04-back-mut: oklch(0.73 0.01 85);
  --color-tch04-acc: #5fd3c0;
  --color-tch04-acc: oklch(0.81 0.1 175);
  --font-tch04-sans: 'DM Sans', system-ui, sans-serif;
  --font-tch04-display: 'Bricolage Grotesque', system-ui, sans-serif;
}

.tch-04 {
  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,600;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap">

What changed in the port

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

  • v4 mints transform-3d, rotate-y-180 and backface-hidden, so the flip needs exactly one arbitrary property — [perspective:1600px]. Under v3 this demo was mostly brackets.
  • Splitting the group wrapper from the flipper is what lets group-focus-within: work: the group must contain the back face's links, and the flipper is the thing that rotates.
  • UI change from the CSS original: keyboard flip via group-focus-within:, 44px link targets, pointer-events gating on the hidden face, and a reduced-motion cross-fade instead of a dead transition:none.
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 3D Flip Card (Front to Back) with backface-visibility
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-3d-flip-card-front-to-back/

A team-profile card that turns a full 180° to swap a photo-and-name front for a bio-and-links back. v4 is the first version where this port is genuinely tidy: transform-3d, rotate-y-180 and backface-hidden are all real utilities, so only perspective stays arbitrary.
## HTML
```html
<section class="tch-04 w-full min-h-svh grid place-items-center bg-tch04-bg bg-[radial-gradient(circle_at_70%_20%,#f6f4ee,#dcd9cf)] font-tch04-sans p-8 [perspective:1600px]">
  <div class="group w-[320px] h-[430px] cursor-pointer">
    <div class="relative size-full transform-3d transition-transform duration-700 ease-[cubic-bezier(0.4,0.15,0.2,1)] group-hover:rotate-y-180 group-focus-within:rotate-y-180 motion-reduce:transition-none motion-reduce:group-hover:rotate-y-0 motion-reduce:group-focus-within:rotate-y-0">
      <div class="absolute inset-0 rounded-3xl overflow-hidden backface-hidden shadow-[0_20px_45px_rgb(60_55_40/0.2)] bg-[linear-gradient(165deg,var(--color-tch04-front-a),var(--color-tch04-front-b))] flex flex-col justify-end p-[2.2rem] text-tch04-front-ink motion-reduce:transition-opacity motion-reduce:duration-300 motion-reduce:group-hover:opacity-0 motion-reduce:group-focus-within:opacity-0 before:content-[''] before:absolute before:-top-[10%] before:left-1/2 before:size-[200px] before:-translate-x-1/2 before:rounded-full before:bg-[radial-gradient(circle_at_40%_35%,#d8f5ee,#6cc4b4)] before:shadow-[0_20px_50px_rgb(0_0_0/0.2)]">
        <span class="relative text-[0.7rem] tracking-[0.22em] uppercase text-tch04-front-mut">Lead Designer</span>
        <h2 class="relative font-tch04-display font-extrabold text-[2.2rem] leading-none mt-1">Mara<br>Okonkwo</h2>
        <span class="relative mt-4 text-[0.74rem] text-tch04-front-mut">↻ hover or focus to flip</span>
      </div>
      <div class="absolute inset-0 rounded-3xl overflow-hidden backface-hidden rotate-y-180 shadow-[0_20px_45px_rgb(60_55_40/0.2)] bg-[linear-gradient(165deg,#1c1b1a,#0f0e0d)] p-[2.2rem] flex flex-col justify-between text-tch04-back-ink pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto motion-reduce:rotate-y-0 motion-reduce:opacity-0 motion-reduce:transition-opacity motion-reduce:duration-300 motion-reduce:group-hover:opacity-100 motion-reduce:group-focus-within:opacity-100">
        <div>
          <span class="text-[0.7rem] tracking-[0.22em] uppercase text-tch04-acc">Lead Designer</span>
          <h3 class="font-tch04-display font-extrabold text-[1.7rem] leading-[1.05] mt-1 mb-3.5">Mara Okonkwo</h3>
          <p class="text-[0.85rem] leading-[1.6] text-tch04-back-mut">Twelve years shaping product systems for fintech and health. Obsessed with motion, type, and the space between clicks.</p>
        </div>
        <div class="flex gap-2.5">
          <a href="#" class="flex-1 flex items-center justify-center min-h-11 rounded-[10px] border border-white/20 text-[0.78rem] font-medium text-tch04-back-ink no-underline transition-colors duration-300 hover:bg-tch04-acc/20 focus-visible:outline-2 focus-visible:outline-tch04-acc focus-visible:outline-offset-2">Email</a>
          <a href="#" class="flex-1 flex items-center justify-center min-h-11 rounded-[10px] border border-white/20 text-[0.78rem] font-medium text-tch04-back-ink no-underline transition-colors duration-300 hover:bg-tch04-acc/20 focus-visible:outline-2 focus-visible:outline-tch04-acc focus-visible:outline-offset-2">Dribbble</a>
          <a href="#" class="flex-1 flex items-center justify-center min-h-11 rounded-[10px] border border-white/20 text-[0.78rem] font-medium text-tch04-back-ink no-underline transition-colors duration-300 hover:bg-tch04-acc/20 focus-visible:outline-2 focus-visible:outline-tch04-acc focus-visible:outline-offset-2">LinkedIn</a>
        </div>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch04-bg: #eceae3;
  --color-tch04-bg: oklch(0.93 0.008 95);
  --color-tch04-front-a: #2f9e8f;
  --color-tch04-front-a: oklch(0.63 0.1 178);
  --color-tch04-front-b: #145c52;
  --color-tch04-front-b: oklch(0.42 0.08 178);
  --color-tch04-front-ink: #f2fbf9;
  --color-tch04-front-ink: oklch(0.98 0.01 178);
  --color-tch04-front-mut: #aef0e3;
  --color-tch04-front-mut: oklch(0.91 0.07 172);
  --color-tch04-back-ink: #ece9e2;
  --color-tch04-back-ink: oklch(0.93 0.008 85);
  --color-tch04-back-mut: #b3afa6;
  --color-tch04-back-mut: oklch(0.73 0.01 85);
  --color-tch04-acc: #5fd3c0;
  --color-tch04-acc: oklch(0.81 0.1 175);
  --font-tch04-sans: 'DM Sans', system-ui, sans-serif;
  --font-tch04-display: 'Bricolage Grotesque', system-ui, sans-serif;
}

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

How this works

Three elements, and each has exactly one job. The stage holds [perspective:1600px]. The flipper holds transform-3d and the rotation. The two faces hold backface-hidden and are stacked at absolute inset-0, with the back pre-rotated rotate-y-180 so it faces away at rest.

The flip is one variant pair. group-hover:rotate-y-180 group-focus-within:rotate-y-180 on the flipper. Because the group wraps both faces, tabbing to a link on the back turns the card — the accessible version of the pattern for the price of one extra class.

Reduced motion gets a cross-fade, not nothing. Under motion-reduce: the rotation is pinned at 0 and the faces swap via opacity, so the back is still reachable without a spinning card.

Make it yours

  • Hinge axis: swap both rotate-y-180 for rotate-x-180.
  • Speed: duration-700 is luxurious; duration-400 is snappy.
  • Faces retheme independently — --color-tch04-front-* and --color-tch04-back-* share nothing but the geometry.

Gotchas — read before shipping

  • backface-hidden goes on BOTH faces. Front-only is the classic ghosting bug.
  • perspective belongs on the stage; on the flipper it degrades the rotation to a flat skew.
  • The back face's links must not intercept clicks at rest — pointer-events-none with a group-hover:pointer-events-auto twin handles it.
  • rotate-y-* and transform-3d are v4 utilities; in v3 both were arbitrary properties.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

3D transforms and backface-visibility are universally supported; rotate-y-*/transform-3d require Tailwind v4, which sets the floor.

Techniques used in this demo

Utilitiesfirst-class utility or variant

perspectivetw ↗backface visibilitytw ↗:focus-withintw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →