33 Tailwind CSS Card Hover Effects
12 / 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 Corner Peel Card with clip-path Triangles

A sticker-style promo whose top-right corner peels back to expose a hidden subscriber discount, with a soft shadow under the lifted flap. clip-path has no utility and never should — the arbitrary [clip-path:polygon(…)] with underscore-escaped values is the idiomatic answer.

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-12 w-full min-h-svh grid place-items-center bg-tch12-bg bg-[radial-gradient(circle_at_30%_20%,#e2f0eb,#b9d4cb)] font-tch12-sans p-8">
  <article tabindex="0" class="group relative w-[320px] h-[400px] rounded-[14px] overflow-hidden cursor-pointer outline-none bg-tch12-paper shadow-[0_14px_30px_rgb(40_70_60/0.18)] focus-visible:outline-3 focus-visible:outline-tch12-acc focus-visible:outline-offset-4">
    <div class="absolute top-0 right-0 z-3 size-0 grid place-items-center pointer-events-none bg-[linear-gradient(135deg,#1f5c4d,#2f8f76)] [clip-path:polygon(100%_0,0_0,100%_100%)] transition-[width,height] duration-450 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:size-[110px] group-focus-visible:size-[110px] motion-reduce:transition-none">
      <span class="absolute top-3.5 right-3.5 rotate-45 text-white font-bold text-[0.65rem] opacity-0 transition-opacity duration-300 delay-200 group-hover:opacity-100 group-focus-visible:opacity-100">-20%</span>
    </div>
    <div class="absolute top-0 right-0 z-4 size-0 pointer-events-none origin-top-right bg-[linear-gradient(135deg,#f7efe0,#e7dcc6)] [clip-path:polygon(100%_0,0_0,100%_100%)] transition-[width,height,box-shadow] duration-450 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:size-[110px] group-hover:shadow-[-6px_6px_14px_rgb(0_0_0/0.25)] group-focus-visible:size-[110px] motion-reduce:transition-none"></div>
    <div class="relative z-1 h-full p-[2.2rem] flex flex-col justify-between text-tch12-ink">
      <span class="self-start bg-tch12-tag text-white font-bold text-[0.7rem] tracking-[0.12em] uppercase px-3 py-1.5 rounded-full">Members Only</span>
      <h2 class="font-tch12-display text-[3rem] leading-[0.95] text-tch12-acc">Spring<br>Harvest Box</h2>
      <p class="text-[0.9rem] leading-[1.6] text-tch12-body">Peel the corner to uncover this week's hidden subscriber discount on farm-fresh produce.</p>
    </div>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tch12-bg: #cfe3dd;
  --color-tch12-bg: oklch(0.89 0.03 175);
  --color-tch12-paper: #fffdf7;
  --color-tch12-paper: oklch(0.99 0.008 95);
  --color-tch12-ink: #2a3d36;
  --color-tch12-ink: oklch(0.33 0.03 165);
  --color-tch12-body: #5a6e66;
  --color-tch12-body: oklch(0.5 0.025 165);
  --color-tch12-acc: #1f5c4d;
  --color-tch12-acc: oklch(0.42 0.07 168);
  --color-tch12-tag: #ff7a59;
  --color-tch12-tag: oklch(0.72 0.17 40);
  --font-tch12-sans: 'Nunito Sans', system-ui, sans-serif;
  --font-tch12-display: 'Caveat', cursive;
}

.tch-12 {
  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-tch12-bg: #cfe3dd;
  --color-tch12-bg: oklch(0.89 0.03 175);
  --color-tch12-paper: #fffdf7;
  --color-tch12-paper: oklch(0.99 0.008 95);
  --color-tch12-ink: #2a3d36;
  --color-tch12-ink: oklch(0.33 0.03 165);
  --color-tch12-body: #5a6e66;
  --color-tch12-body: oklch(0.5 0.025 165);
  --color-tch12-acc: #1f5c4d;
  --color-tch12-acc: oklch(0.42 0.07 168);
  --color-tch12-tag: #ff7a59;
  --color-tch12-tag: oklch(0.72 0.17 40);
  --font-tch12-sans: 'Nunito Sans', system-ui, sans-serif;
  --font-tch12-display: 'Caveat', cursive;
}

.tch-12 {
  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=Caveat:wght@600&family=Nunito+Sans:opsz,wght@6..12,400;6..12,700&display=swap">

What changed in the port

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

  • clip-path is not a design-scale value, so it stays an arbitrary property — and the underscore escape carries the multi-argument polygon through intact.
  • size-0 → size-[110px] is the port's small win: one utility where the CSS needed a width/height pair in two rules.
  • UI change from the CSS original: focusable card, peel on group-focus-visible:, and pointer-events-none on both triangles so the growing corner never steals a click.
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 Corner Peel Card with clip-path Triangles
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-corner-peel-card-clip-path/

A sticker-style promo whose top-right corner peels back to expose a hidden subscriber discount, with a soft shadow under the lifted flap. clip-path has no utility and never should &mdash; the arbitrary [clip-path:polygon(…)] with underscore-escaped values is the idiomatic answer.
## HTML
```html
<section class="tch-12 w-full min-h-svh grid place-items-center bg-tch12-bg bg-[radial-gradient(circle_at_30%_20%,#e2f0eb,#b9d4cb)] font-tch12-sans p-8">
  <article tabindex="0" class="group relative w-[320px] h-[400px] rounded-[14px] overflow-hidden cursor-pointer outline-none bg-tch12-paper shadow-[0_14px_30px_rgb(40_70_60/0.18)] focus-visible:outline-3 focus-visible:outline-tch12-acc focus-visible:outline-offset-4">
    <div class="absolute top-0 right-0 z-3 size-0 grid place-items-center pointer-events-none bg-[linear-gradient(135deg,#1f5c4d,#2f8f76)] [clip-path:polygon(100%_0,0_0,100%_100%)] transition-[width,height] duration-450 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:size-[110px] group-focus-visible:size-[110px] motion-reduce:transition-none">
      <span class="absolute top-3.5 right-3.5 rotate-45 text-white font-bold text-[0.65rem] opacity-0 transition-opacity duration-300 delay-200 group-hover:opacity-100 group-focus-visible:opacity-100">-20%</span>
    </div>
    <div class="absolute top-0 right-0 z-4 size-0 pointer-events-none origin-top-right bg-[linear-gradient(135deg,#f7efe0,#e7dcc6)] [clip-path:polygon(100%_0,0_0,100%_100%)] transition-[width,height,box-shadow] duration-450 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:size-[110px] group-hover:shadow-[-6px_6px_14px_rgb(0_0_0/0.25)] group-focus-visible:size-[110px] motion-reduce:transition-none"></div>
    <div class="relative z-1 h-full p-[2.2rem] flex flex-col justify-between text-tch12-ink">
      <span class="self-start bg-tch12-tag text-white font-bold text-[0.7rem] tracking-[0.12em] uppercase px-3 py-1.5 rounded-full">Members Only</span>
      <h2 class="font-tch12-display text-[3rem] leading-[0.95] text-tch12-acc">Spring<br>Harvest Box</h2>
      <p class="text-[0.9rem] leading-[1.6] text-tch12-body">Peel the corner to uncover this week's hidden subscriber discount on farm-fresh produce.</p>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch12-bg: #cfe3dd;
  --color-tch12-bg: oklch(0.89 0.03 175);
  --color-tch12-paper: #fffdf7;
  --color-tch12-paper: oklch(0.99 0.008 95);
  --color-tch12-ink: #2a3d36;
  --color-tch12-ink: oklch(0.33 0.03 165);
  --color-tch12-body: #5a6e66;
  --color-tch12-body: oklch(0.5 0.025 165);
  --color-tch12-acc: #1f5c4d;
  --color-tch12-acc: oklch(0.42 0.07 168);
  --color-tch12-tag: #ff7a59;
  --color-tch12-tag: oklch(0.72 0.17 40);
  --font-tch12-sans: 'Nunito Sans', system-ui, sans-serif;
  --font-tch12-display: 'Caveat', cursive;
}

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

How this works

Two stacked triangles, one growing. The hidden layer (dark green, holding the discount) and the flap (paper-coloured, the peeled corner) share the same clip-path and the same corner. Both grow from size-0 to 110px on hover; because the flap sits above, what you see is a corner of paper lifting to expose the colour beneath.

Same vertices, or no animation. clip-path: polygon() interpolates only between shapes with identical vertex counts. Both states here use the same three-point polygon, so only the element's box size changes and the triangle scales with it.

The label waits. delay-200 on the -20% text means the reward appears after the fold, not during it — a 200ms difference that turns two simultaneous animations into a small sequence.

Make it yours

  • Move the peel to another corner by rotating the polygon's vertices and swapping the anchor utilities.
  • Peel size: group-hover:size-[110px] is a coupon corner; size-[180px] is a dog-eared postcard.
  • Put anything meaningful under the flap — SALE, NEW, a price. A peel with nothing behind it reads as a rendering bug.

Gotchas — read before shipping

  • Equal vertex counts in both clip-path states. Add a point on hover and the shape snaps instead of animating.
  • pointer-events-none on the flap, or the growing triangle starts eating clicks in the card's corner.
  • Animating width/height does touch layout — acceptable here because the element is absolutely positioned and 110px, but do not scale this pattern up to a full-card wipe.
  • Keep the shadow blur small; filter: drop-shadow on a clipped element is markedly more expensive than a box-shadow.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

clip-path: polygon() is universally supported; animated interpolation requires matching vertex counts. The floor is Tailwind v4's sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

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

Arbitraryneeds bracket syntax

clip-pathtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →