33 Tailwind CSS Card Hover Effects
06 / 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 Minimalist Elevation Card with Layered Dynamic Shadows

The restrained one: nearly flat at rest, then an 8px lift and a four-layer shadow that reads as light blocked at four distances. The port's lesson is where shadows belong — two multi-layer stacks used by one element each go in @theme as --shadow-* entries, which is what turns them into shadow-tch06-rest and shadow-tch06-lift.

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-06 w-full min-h-svh grid place-items-center bg-tch06-bg font-tch06-sans p-8">
  <article class="group relative w-[340px] min-h-[420px] p-[2.2rem] rounded-2xl bg-white border border-tch06-edge text-tch06-ink flex flex-col cursor-pointer shadow-tch06-rest transition-[translate,box-shadow,border-color] duration-350 ease-[cubic-bezier(0.2,0.7,0.2,1)] hover:-translate-y-2 hover:border-tch06-edge2 hover:shadow-tch06-lift focus-within:-translate-y-2 focus-within:shadow-tch06-lift motion-reduce:transition-none motion-reduce:hover:translate-y-0">
    <div class="grid place-items-center size-13 rounded-[13px] bg-linear-to-br from-tch06-acc to-tch06-acc2 text-white text-2xl shadow-[0_6px_14px_var(--color-tch06-acc2)]/30">⌘</div>
    <span class="mt-6 text-[0.72rem] tracking-[0.14em] uppercase text-tch06-mut">Documentation</span>
    <h2 class="font-tch06-display font-medium text-[1.9rem] leading-[1.15] mt-1.5">Quickstart<br>in 5 minutes</h2>
    <p class="text-[0.9rem] leading-[1.65] text-tch06-body mt-3.5">Install the SDK, authenticate, and ship your first request. The card lifts gently off the page as you focus it.</p>
    <a href="#" class="mt-auto inline-flex items-center gap-1.5 min-h-11 text-[0.88rem] font-semibold text-tch06-acc2 no-underline rounded-md focus-visible:outline-2 focus-visible:outline-tch06-acc2 focus-visible:outline-offset-2">Read the guide <span class="transition-transform duration-350 group-hover:translate-x-1 motion-reduce:transition-none" aria-hidden="true">→</span></a>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tch06-bg: #f7f8fa;
  --color-tch06-bg: oklch(0.98 0.003 255);
  --color-tch06-edge: #e7e9ee;
  --color-tch06-edge: oklch(0.93 0.005 255);
  --color-tch06-edge2: #dfe2e8;
  --color-tch06-edge2: oklch(0.9 0.006 255);
  --color-tch06-ink: #1c2230;
  --color-tch06-ink: oklch(0.25 0.02 255);
  --color-tch06-body: #5c6678;
  --color-tch06-body: oklch(0.49 0.02 255);
  --color-tch06-mut: #8a94a6;
  --color-tch06-mut: oklch(0.65 0.02 255);
  --color-tch06-acc: #3b82f6;
  --color-tch06-acc: oklch(0.62 0.19 259);
  --color-tch06-acc2: #2563eb;
  --color-tch06-acc2: oklch(0.54 0.22 262);
  --font-tch06-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tch06-display: 'Newsreader', Georgia, serif;
  --shadow-tch06-rest: 0 1px 2px oklch(0.25 0.03 255 / 0.04), 0 2px 4px oklch(0.25 0.03 255 / 0.03);
  --shadow-tch06-lift: 0 2px 4px oklch(0.25 0.03 255 / 0.04), 0 6px 12px oklch(0.25 0.03 255 / 0.06), 0 14px 28px oklch(0.25 0.03 255 / 0.08), 0 28px 56px oklch(0.25 0.03 255 / 0.1);
}

.tch-06 {
  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-tch06-bg: #f7f8fa;
  --color-tch06-bg: oklch(0.98 0.003 255);
  --color-tch06-edge: #e7e9ee;
  --color-tch06-edge: oklch(0.93 0.005 255);
  --color-tch06-edge2: #dfe2e8;
  --color-tch06-edge2: oklch(0.9 0.006 255);
  --color-tch06-ink: #1c2230;
  --color-tch06-ink: oklch(0.25 0.02 255);
  --color-tch06-body: #5c6678;
  --color-tch06-body: oklch(0.49 0.02 255);
  --color-tch06-mut: #8a94a6;
  --color-tch06-mut: oklch(0.65 0.02 255);
  --color-tch06-acc: #3b82f6;
  --color-tch06-acc: oklch(0.62 0.19 259);
  --color-tch06-acc2: #2563eb;
  --color-tch06-acc2: oklch(0.54 0.22 262);
  --font-tch06-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tch06-display: 'Newsreader', Georgia, serif;
  --shadow-tch06-rest: 0 1px 2px oklch(0.25 0.03 255 / 0.04), 0 2px 4px oklch(0.25 0.03 255 / 0.03);
  --shadow-tch06-lift: 0 2px 4px oklch(0.25 0.03 255 / 0.04), 0 6px 12px oklch(0.25 0.03 255 / 0.06), 0 14px 28px oklch(0.25 0.03 255 / 0.08), 0 28px 56px oklch(0.25 0.03 255 / 0.1);
}

.tch-06 {
  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=Newsreader:opsz,wght@6..72,400;6..72,500&family=Space+Grotesk:wght@400;500;600&display=swap">

What changed in the port

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

  • The two shadow stacks are the only thing in this demo worth tokenising, and --shadow-* in @theme is exactly the mechanism — shadow-tch06-rest and hover:shadow-tch06-lift fall out for free.
  • transition-[translate,box-shadow,border-color] names its properties rather than using transition-all: three named properties composite, all invites a layout property in later by accident.
  • UI change from the CSS original: the CTA is a real link with a 44px target and the card lifts on focus-within: too, so keyboard users get the same affordance.
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 Minimalist Elevation Card with Layered Dynamic Shadows
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-minimalist-elevation-dynamic-shadow-card/

The restrained one: nearly flat at rest, then an 8px lift and a four-layer shadow that reads as light blocked at four distances. The port's lesson is where shadows belong &mdash; two multi-layer stacks used by one element each go in @theme as --shadow-* entries, which is what turns them into shadow-tch06-rest and shadow-tch06-lift.
## HTML
```html
<section class="tch-06 w-full min-h-svh grid place-items-center bg-tch06-bg font-tch06-sans p-8">
  <article class="group relative w-[340px] min-h-[420px] p-[2.2rem] rounded-2xl bg-white border border-tch06-edge text-tch06-ink flex flex-col cursor-pointer shadow-tch06-rest transition-[translate,box-shadow,border-color] duration-350 ease-[cubic-bezier(0.2,0.7,0.2,1)] hover:-translate-y-2 hover:border-tch06-edge2 hover:shadow-tch06-lift focus-within:-translate-y-2 focus-within:shadow-tch06-lift motion-reduce:transition-none motion-reduce:hover:translate-y-0">
    <div class="grid place-items-center size-13 rounded-[13px] bg-linear-to-br from-tch06-acc to-tch06-acc2 text-white text-2xl shadow-[0_6px_14px_var(--color-tch06-acc2)]/30">⌘</div>
    <span class="mt-6 text-[0.72rem] tracking-[0.14em] uppercase text-tch06-mut">Documentation</span>
    <h2 class="font-tch06-display font-medium text-[1.9rem] leading-[1.15] mt-1.5">Quickstart<br>in 5 minutes</h2>
    <p class="text-[0.9rem] leading-[1.65] text-tch06-body mt-3.5">Install the SDK, authenticate, and ship your first request. The card lifts gently off the page as you focus it.</p>
    <a href="#" class="mt-auto inline-flex items-center gap-1.5 min-h-11 text-[0.88rem] font-semibold text-tch06-acc2 no-underline rounded-md focus-visible:outline-2 focus-visible:outline-tch06-acc2 focus-visible:outline-offset-2">Read the guide <span class="transition-transform duration-350 group-hover:translate-x-1 motion-reduce:transition-none" aria-hidden="true">→</span></a>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch06-bg: #f7f8fa;
  --color-tch06-bg: oklch(0.98 0.003 255);
  --color-tch06-edge: #e7e9ee;
  --color-tch06-edge: oklch(0.93 0.005 255);
  --color-tch06-edge2: #dfe2e8;
  --color-tch06-edge2: oklch(0.9 0.006 255);
  --color-tch06-ink: #1c2230;
  --color-tch06-ink: oklch(0.25 0.02 255);
  --color-tch06-body: #5c6678;
  --color-tch06-body: oklch(0.49 0.02 255);
  --color-tch06-mut: #8a94a6;
  --color-tch06-mut: oklch(0.65 0.02 255);
  --color-tch06-acc: #3b82f6;
  --color-tch06-acc: oklch(0.62 0.19 259);
  --color-tch06-acc2: #2563eb;
  --color-tch06-acc2: oklch(0.54 0.22 262);
  --font-tch06-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tch06-display: 'Newsreader', Georgia, serif;
  --shadow-tch06-rest: 0 1px 2px oklch(0.25 0.03 255 / 0.04), 0 2px 4px oklch(0.25 0.03 255 / 0.03);
  --shadow-tch06-lift: 0 2px 4px oklch(0.25 0.03 255 / 0.04), 0 6px 12px oklch(0.25 0.03 255 / 0.06), 0 14px 28px oklch(0.25 0.03 255 / 0.08), 0 28px 56px oklch(0.25 0.03 255 / 0.1);
}

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

How this works

Elevation is a sum, not a shadow. At rest the card carries two very tight layers. On hover it swaps to four — 2px, 6px, 14px and 28px offsets with growing blur and falling opacity. That stack is what makes the lift read as a physical card rather than a drop-shadow effect.

Multi-layer shadows are design tokens. Written inline they are a 120-character arbitrary value repeated on hover. As @theme --shadow-* entries they become two named utilities, and the whole elevation system is editable in one block.

Only transform and box-shadow animate. Both composite. Faking the lift with margin-top would relayout the card's whole column on every frame.

Make it yours

  • Lift height: hover:-translate-y-1 restrained, -translate-y-3 pronounced — scale the shadow stack with it.
  • Coloured elevation: tint each layer in --shadow-tch06-lift toward the accent for a brand-lit lift.
  • Arrow intent: → for continue, ↗ for external — the nudge utility is unchanged.

Gotchas — read before shipping

  • Keep the transition on the resting state, not inside hover:, or the ease-out never fires on mouseleave.
  • Cap blur radii near 40px; wider shadows are expensive to composite on mobile Safari.
  • Reach for will-change-transform only after measuring jank — pre-allocating layers for every card in a grid costs more than it saves.
  • On a dark card this strategy inverts: an inset top highlight reads as elevation where a bottom shadow reads as nothing.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Multi-layer box-shadow, transforms and transitions are universally supported; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗transitionstw ↗:focus-visibletw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →