33 Tailwind CSS Card Hover Effects
22 / 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 Blob-to-Rectangle Border Morph Card

A meditation card that rests as an organic blob and settles into a clean rounded rectangle on hover, with the icon and button reshaping in sync. Three elements morph on one spring curve, and because the curve is shared it becomes a @theme easing token.

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-22 w-full min-h-svh grid place-items-center bg-tch22-bg bg-[radial-gradient(circle_at_80%_10%,#ffe0cc,transparent_50%)] font-tch22-sans p-8">
  <article tabindex="0" class="group relative w-[320px] h-[420px] overflow-hidden cursor-pointer outline-none text-white bg-[linear-gradient(155deg,#ff7e54,#ff4d8d)] rounded-[38%_62%_63%_37%/41%_44%_56%_59%] shadow-[0_20px_45px_rgb(255_77_141/0.35)] transition-[border-radius,translate,box-shadow] duration-700 ease-tch22-settle hover:rounded-[28px] hover:-translate-y-1.5 hover:shadow-[0_30px_60px_rgb(255_77_141/0.45)] focus-visible:rounded-[28px] focus-visible:-translate-y-1.5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-4 motion-reduce:duration-150 before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_30%_20%,rgb(255_255_255/0.35),transparent_55%)]">
    <div class="relative z-2 h-full p-[2.6rem] flex flex-col justify-between">
      <div class="grid place-items-center size-14 rounded-full bg-white/25 text-[1.6rem] transition-[border-radius] duration-700 ease-tch22-settle group-hover:rounded-2xl group-focus-visible:rounded-2xl motion-reduce:duration-150">🫧</div>
      <div>
        <h2 class="font-tch22-display font-bold text-[2.5rem] leading-none">Bubble<br>Wellness</h2>
        <p class="text-[0.9rem] leading-[1.6] text-white/90 mt-2">A meditation app that breathes with you. Shapes soften and settle as you exhale.</p>
      </div>
      <a href="#" class="self-start inline-flex items-center min-h-11 px-6 rounded-full bg-white text-tch22-acc font-tch22-display font-semibold text-[0.9rem] no-underline transition-[border-radius] duration-700 ease-tch22-settle group-hover:rounded-xl focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:duration-150">Try a session</a>
    </div>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tch22-bg: #fef0e6;
  --color-tch22-bg: oklch(0.96 0.02 55);
  --color-tch22-acc: #ff4d8d;
  --color-tch22-acc: oklch(0.68 0.22 5);
  --font-tch22-sans: 'DM Sans', system-ui, sans-serif;
  --font-tch22-display: 'Fredoka', system-ui, sans-serif;
  --ease-tch22-settle: cubic-bezier(0.34, 1.4, 0.5, 1);
}

.tch-22 {
  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-tch22-bg: #fef0e6;
  --color-tch22-bg: oklch(0.96 0.02 55);
  --color-tch22-acc: #ff4d8d;
  --color-tch22-acc: oklch(0.68 0.22 5);
  --font-tch22-sans: 'DM Sans', system-ui, sans-serif;
  --font-tch22-display: 'Fredoka', system-ui, sans-serif;
  --ease-tch22-settle: cubic-bezier(0.34, 1.4, 0.5, 1);
}

.tch-22 {
  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=Fredoka:wght@500;600;700&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.

  • The eight-value radius is exactly the kind of thing arbitrary values exist for: not a design-scale token, not repeatable, and unambiguous where it sits.
  • Three elements sharing ease-tch22-settle is the same argument as demo 07 — a curve used more than once belongs in @theme.
  • UI change from the CSS original: focusable card, morph on focus-visible:, the button is a real link with a 44px target, and reduced motion shortens to 150ms rather than killing the transition.
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 Blob-to-Rectangle Border Morph Card
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-blob-to-rectangle-border-morph-card/

A meditation card that rests as an organic blob and settles into a clean rounded rectangle on hover, with the icon and button reshaping in sync. Three elements morph on one spring curve, and because the curve is shared it becomes a @theme easing token.
## HTML
```html
<section class="tch-22 w-full min-h-svh grid place-items-center bg-tch22-bg bg-[radial-gradient(circle_at_80%_10%,#ffe0cc,transparent_50%)] font-tch22-sans p-8">
  <article tabindex="0" class="group relative w-[320px] h-[420px] overflow-hidden cursor-pointer outline-none text-white bg-[linear-gradient(155deg,#ff7e54,#ff4d8d)] rounded-[38%_62%_63%_37%/41%_44%_56%_59%] shadow-[0_20px_45px_rgb(255_77_141/0.35)] transition-[border-radius,translate,box-shadow] duration-700 ease-tch22-settle hover:rounded-[28px] hover:-translate-y-1.5 hover:shadow-[0_30px_60px_rgb(255_77_141/0.45)] focus-visible:rounded-[28px] focus-visible:-translate-y-1.5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-4 motion-reduce:duration-150 before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_30%_20%,rgb(255_255_255/0.35),transparent_55%)]">
    <div class="relative z-2 h-full p-[2.6rem] flex flex-col justify-between">
      <div class="grid place-items-center size-14 rounded-full bg-white/25 text-[1.6rem] transition-[border-radius] duration-700 ease-tch22-settle group-hover:rounded-2xl group-focus-visible:rounded-2xl motion-reduce:duration-150">🫧</div>
      <div>
        <h2 class="font-tch22-display font-bold text-[2.5rem] leading-none">Bubble<br>Wellness</h2>
        <p class="text-[0.9rem] leading-[1.6] text-white/90 mt-2">A meditation app that breathes with you. Shapes soften and settle as you exhale.</p>
      </div>
      <a href="#" class="self-start inline-flex items-center min-h-11 px-6 rounded-full bg-white text-tch22-acc font-tch22-display font-semibold text-[0.9rem] no-underline transition-[border-radius] duration-700 ease-tch22-settle group-hover:rounded-xl focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:duration-150">Try a session</a>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch22-bg: #fef0e6;
  --color-tch22-bg: oklch(0.96 0.02 55);
  --color-tch22-acc: #ff4d8d;
  --color-tch22-acc: oklch(0.68 0.22 5);
  --font-tch22-sans: 'DM Sans', system-ui, sans-serif;
  --font-tch22-display: 'Fredoka', system-ui, sans-serif;
  --ease-tch22-settle: cubic-bezier(0.34, 1.4, 0.5, 1);
}

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

How this works

Eight values make a blob. border-radius accepts four horizontal and four vertical radii; mismatched percentages produce an asymmetric organic shape. Tailwind carries the whole thing through an arbitrary value with underscores for the spaces — unlovely to read, but exact.

Three elements, one curve. Card, icon and button all morph on ease-tch22-settle, a spring with mild overshoot. Sharing the curve is what makes the card feel like one organism relaxing rather than three independent animations.

border-radius is animatable; border-image is not. That is the boundary of this technique — radius morphs are free, edge-texture morphs need pseudo-elements.

Make it yours

  • Rest shape: change the eight percentages. Closer to 50% is rounder; wilder spreads read as liquid.
  • Settle target: rounded-[28px] is calm; rounded-none is a hard snap to grid.
  • Timing: 700ms is a slow exhale, which is the entire brand argument for this card.

Gotchas — read before shipping

  • Test the blob against real content — an aggressive radius clips corner text before you notice it in a screenshot.
  • Radii above ~50% of the shorter side produce ellipses. Usually intentional here, but check both states.
  • motion-reduce: should shorten, not delete: the card still needs to reach its settled shape.
  • Keep the button's morph subtler than the card's; a pill collapsing to a square reads as a different button.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Animating border-radius is universally supported; border-image animation is not, in any browser.

Techniques used in this demo

Utilitiesfirst-class utility or variant

border radiustw ↗transitionstw ↗box-shadowtw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →