33 Tailwind CSS Card Hover Effects
07 / 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 Elastic Lift Card with Spring Cubic-Bezier

A coffee card that springs up and overshoots on hover, with an ember glow rising from below. One value carries the whole effect, so it earns a @theme entry: --ease-tch07-bounce mints ease-tch07-bounce and three elements share the same spring.

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-07 w-full min-h-svh grid place-items-center bg-tch07-bg bg-[radial-gradient(circle_at_20%_20%,#ffe7c2_0%,transparent_45%),radial-gradient(circle_at_80%_80%,#ffc9d4_0%,transparent_45%)] font-tch07-mono p-8">
  <article tabindex="0" class="group relative w-[320px] h-[420px] rounded-[28px] overflow-hidden cursor-pointer origin-bottom bg-[linear-gradient(160deg,#1c1410_0%,#3a2618_100%)] text-tch07-ink shadow-[0_10px_25px_rgb(60_30_10/0.25)] transition-[translate,scale,box-shadow] duration-550 ease-tch07-bounce hover:-translate-y-6 hover:scale-104 hover:shadow-[0_40px_60px_rgb(60_30_10/0.4)] focus-visible:-translate-y-6 focus-visible:scale-104 outline-none focus-visible:outline-3 focus-visible:outline-tch07-ember focus-visible:outline-offset-4 motion-reduce:ease-out motion-reduce:hover:scale-100 before:content-[''] before:absolute before:inset-0 before:opacity-0 before:transition-opacity before:duration-500 before:bg-[radial-gradient(circle_at_50%_120%,var(--color-tch07-ember)_0%,transparent_60%)] group-hover:before:opacity-55 group-focus-visible:before:opacity-55">
    <div class="relative z-2 h-full px-8 py-9 flex flex-col justify-between">
      <span class="text-[0.72rem] tracking-[0.32em] uppercase text-tch07-tag">Seasonal Roast</span>
      <div class="font-tch07-display font-black text-[5.5rem] leading-[0.85] transition-transform duration-550 ease-tch07-bounce group-hover:-translate-y-1.5 motion-reduce:transition-none">04</div>
      <div>
        <h2 class="font-tch07-display font-semibold text-[1.9rem] leading-[1.1]">Ember Drip<br>Coffee Co.</h2>
        <p class="text-[0.85rem] leading-[1.6] text-tch07-body max-w-[90%] mt-2">Slow-roasted single origin beans with notes of burnt caramel and stone fruit.</p>
      </div>
    </div>
    <span class="absolute bottom-7 right-7 z-3 size-3.5 rounded-full bg-tch07-ember shadow-[0_0_0_0_rgb(255_138_60/0.6)] transition-[box-shadow] duration-500 group-hover:shadow-[0_0_0_10px_rgb(255_138_60/0)]"></span>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tch07-bg: #f4ede4;
  --color-tch07-bg: oklch(0.94 0.014 70);
  --color-tch07-ink: #f4ede4;
  --color-tch07-ink: oklch(0.94 0.014 70);
  --color-tch07-body: #cdb9a6;
  --color-tch07-body: oklch(0.79 0.03 65);
  --color-tch07-tag: #ffb27a;
  --color-tch07-tag: oklch(0.82 0.11 55);
  --color-tch07-ember: #ff8a3c;
  --color-tch07-ember: oklch(0.74 0.17 48);
  --font-tch07-mono: 'Spline Sans Mono', ui-monospace, monospace;
  --font-tch07-display: 'Fraunces', Georgia, serif;
  --ease-tch07-bounce: cubic-bezier(0.34, 1.8, 0.4, 1);
}

.tch-07 {
  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-tch07-bg: #f4ede4;
  --color-tch07-bg: oklch(0.94 0.014 70);
  --color-tch07-ink: #f4ede4;
  --color-tch07-ink: oklch(0.94 0.014 70);
  --color-tch07-body: #cdb9a6;
  --color-tch07-body: oklch(0.79 0.03 65);
  --color-tch07-tag: #ffb27a;
  --color-tch07-tag: oklch(0.82 0.11 55);
  --color-tch07-ember: #ff8a3c;
  --color-tch07-ember: oklch(0.74 0.17 48);
  --font-tch07-mono: 'Spline Sans Mono', ui-monospace, monospace;
  --font-tch07-display: 'Fraunces', Georgia, serif;
  --ease-tch07-bounce: cubic-bezier(0.34, 1.8, 0.4, 1);
}

.tch-07 {
  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=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Spline+Sans+Mono:wght@400;500&display=swap">

What changed in the port

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

  • A curve used by more than one element is a design token, not an arbitrary value — --ease-tch07-bounce in @theme is the difference between one source of truth and two copies drifting apart.
  • transition-[translate,scale,box-shadow] rather than transition-transform, because v4 splits translate and scale into separate properties you can name individually.
  • UI change from the CSS original: the card is focusable with a real ring and the ember glow responds to group-focus-visible:, so the effect is not pointer-only.
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 Elastic Lift Card with Spring Cubic-Bezier
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-elastic-lift-card-hover-effect/

A coffee card that springs up and overshoots on hover, with an ember glow rising from below. One value carries the whole effect, so it earns a @theme entry: --ease-tch07-bounce mints ease-tch07-bounce and three elements share the same spring.
## HTML
```html
<section class="tch-07 w-full min-h-svh grid place-items-center bg-tch07-bg bg-[radial-gradient(circle_at_20%_20%,#ffe7c2_0%,transparent_45%),radial-gradient(circle_at_80%_80%,#ffc9d4_0%,transparent_45%)] font-tch07-mono p-8">
  <article tabindex="0" class="group relative w-[320px] h-[420px] rounded-[28px] overflow-hidden cursor-pointer origin-bottom bg-[linear-gradient(160deg,#1c1410_0%,#3a2618_100%)] text-tch07-ink shadow-[0_10px_25px_rgb(60_30_10/0.25)] transition-[translate,scale,box-shadow] duration-550 ease-tch07-bounce hover:-translate-y-6 hover:scale-104 hover:shadow-[0_40px_60px_rgb(60_30_10/0.4)] focus-visible:-translate-y-6 focus-visible:scale-104 outline-none focus-visible:outline-3 focus-visible:outline-tch07-ember focus-visible:outline-offset-4 motion-reduce:ease-out motion-reduce:hover:scale-100 before:content-[''] before:absolute before:inset-0 before:opacity-0 before:transition-opacity before:duration-500 before:bg-[radial-gradient(circle_at_50%_120%,var(--color-tch07-ember)_0%,transparent_60%)] group-hover:before:opacity-55 group-focus-visible:before:opacity-55">
    <div class="relative z-2 h-full px-8 py-9 flex flex-col justify-between">
      <span class="text-[0.72rem] tracking-[0.32em] uppercase text-tch07-tag">Seasonal Roast</span>
      <div class="font-tch07-display font-black text-[5.5rem] leading-[0.85] transition-transform duration-550 ease-tch07-bounce group-hover:-translate-y-1.5 motion-reduce:transition-none">04</div>
      <div>
        <h2 class="font-tch07-display font-semibold text-[1.9rem] leading-[1.1]">Ember Drip<br>Coffee Co.</h2>
        <p class="text-[0.85rem] leading-[1.6] text-tch07-body max-w-[90%] mt-2">Slow-roasted single origin beans with notes of burnt caramel and stone fruit.</p>
      </div>
    </div>
    <span class="absolute bottom-7 right-7 z-3 size-3.5 rounded-full bg-tch07-ember shadow-[0_0_0_0_rgb(255_138_60/0.6)] transition-[box-shadow] duration-500 group-hover:shadow-[0_0_0_10px_rgb(255_138_60/0)]"></span>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch07-bg: #f4ede4;
  --color-tch07-bg: oklch(0.94 0.014 70);
  --color-tch07-ink: #f4ede4;
  --color-tch07-ink: oklch(0.94 0.014 70);
  --color-tch07-body: #cdb9a6;
  --color-tch07-body: oklch(0.79 0.03 65);
  --color-tch07-tag: #ffb27a;
  --color-tch07-tag: oklch(0.82 0.11 55);
  --color-tch07-ember: #ff8a3c;
  --color-tch07-ember: oklch(0.74 0.17 48);
  --font-tch07-mono: 'Spline Sans Mono', ui-monospace, monospace;
  --font-tch07-display: 'Fraunces', Georgia, serif;
  --ease-tch07-bounce: cubic-bezier(0.34, 1.8, 0.4, 1);
}

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

How this works

The spring is the design token. cubic-bezier(0.34,1.8,0.4,1) overshoots past its endpoint and settles back; that single curve is the effect. Declared once in @theme, it becomes ease-tch07-bounce and every element that should feel the same spring can say so by name.

Transform-origin does real work. origin-bottom means the scale grows upward from the card's base, which is what makes the motion read as a lift rather than a zoom.

The glow is a pseudo-element, not a fourth div. before:bg-[radial-gradient(circle_at_50%_120%,…)] sits below the content and only its opacity animates, so the glow costs nothing on the compositor.

Make it yours

  • Bounce: the third bezier parameter. 1.8 is springy, 1.2 subtle, 1 a plain ease-out.
  • Lift distance pairs with duration — -translate-y-6 at 550ms; shorten both together or the overshoot stops reading.
  • Glow hue comes from --color-tch07-ember, shared by the pulsing dot.

Gotchas — read before shipping

  • Overshoot above 1.7 in the Y parameters can glitch in Safari — this demo sits at 1.8 on purpose and is the one place to test first when retheming.
  • Under 400ms the eye cannot catch the overshoot; the curve reads as a plain ease and the token stops earning its keep.
  • One elastic element per card. Card lift plus badge wobble plus button bounce is three springs fighting.
  • motion-reduce: must swap the curve, not remove the transition — an instant 26px jump is worse than a smooth one.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

cubic-bezier transitions are universally supported and render identically everywhere; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

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

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →