33 CSS Card Hover Effects12 / 33

Pure CSSMIT licensed

Corner Peel

A sticker-style promo card whose top-right corner physically peels back to expose a hidden discount underneath, with a soft drop shadow on the lifted flap. Ideal for coupons, membership perks, or any card with a reward worth "uncovering."

Published Updated

Live Demo
Try it

The code

<div class="card-12">
  <article class="card-12__card">
    <div class="card-12__secret"><span>-20%</span></div>
    <div class="card-12__flap"></div>
    <div class="card-12__content">
      <span class="card-12__tag">Members Only</span>
      <h2 class="card-12__title">Spring<br>Harvest Box</h2>
      <p class="card-12__desc">Peel the corner to uncover this week's hidden subscriber discount on farm-fresh produce.</p>
    </div>
  </article>
</div>
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Nunito+Sans:opsz,wght@6..12,400;6..12,700&display=swap');

.card-12,
.card-12 *,
.card-12 *::before,
.card-12 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card-12 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #cfe3dd;
  background-image: radial-gradient(circle at 30% 20%, #e2f0eb, #b9d4cb);
  font-family: 'Nunito Sans', sans-serif;
  padding: 2rem;
}

.card-12__card {
  position: relative;
  width: 320px;
  height: 400px;
  border-radius: 14px;
  background: #fffdf7;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(40, 70, 60, 0.18);
  overflow: hidden;
}

.card-12__content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #2a3d36;
}

.card-12__tag {
  align-self: flex-start;
  background: #ff7a59;
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  text-transform: uppercase;
}

.card-12__title {
  font-family: 'Caveat', cursive;
  font-size: 3rem;
  line-height: 0.95;
  color: #1f5c4d;
}

.card-12__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #5a6e66;
}

.card-12__flap {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 4;
  background: linear-gradient(135deg, #f7efe0, #e7dcc6);
  transform-origin: top right;
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1), height 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  box-shadow: none;
}

.card-12__secret {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 3;
  background: linear-gradient(135deg, #1f5c4d, #2f8f76);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1), height 0.45s cubic-bezier(0.16,1,0.3,1);
  display: grid;
  place-items: center;
}

.card-12__secret span {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 0.65rem;
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
  transform: rotate(45deg);
}

.card-12__card:hover .card-12__secret {
  width: 110px;
  height: 110px;
}

.card-12__card:hover .card-12__secret span {
  opacity: 1;
}

.card-12__card:hover .card-12__flap {
  width: 110px;
  height: 110px;
  box-shadow: -6px 6px 14px rgba(0,0,0,0.25);
}

@media (prefers-reduced-motion: reduce) {
  .card-12__flap,
    .card-12__secret,
    .card-12__secret span {
    transition: none !important;
  }
}
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 Card Hover Effect 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: Corner Peel
Source: https://codefronts.com/motion/css-card-hover-effects/corner-peel/

A sticker-style promo card whose top-right corner physically peels back to expose a hidden discount underneath, with a soft drop shadow on the lifted flap. Ideal for coupons, membership perks, or any card with a reward worth "uncovering."
## HTML
```html
<div class="card-12">
  <article class="card-12__card">
    <div class="card-12__secret"><span>-20%</span></div>
    <div class="card-12__flap"></div>
    <div class="card-12__content">
      <span class="card-12__tag">Members Only</span>
      <h2 class="card-12__title">Spring<br>Harvest Box</h2>
      <p class="card-12__desc">Peel the corner to uncover this week's hidden subscriber discount on farm-fresh produce.</p>
    </div>
  </article>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Nunito+Sans:opsz,wght@6..12,400;6..12,700&display=swap');

.card-12,
.card-12 *,
.card-12 *::before,
.card-12 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card-12 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #cfe3dd;
  background-image: radial-gradient(circle at 30% 20%, #e2f0eb, #b9d4cb);
  font-family: 'Nunito Sans', sans-serif;
  padding: 2rem;
}

.card-12__card {
  position: relative;
  width: 320px;
  height: 400px;
  border-radius: 14px;
  background: #fffdf7;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(40, 70, 60, 0.18);
  overflow: hidden;
}

.card-12__content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #2a3d36;
}

.card-12__tag {
  align-self: flex-start;
  background: #ff7a59;
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  text-transform: uppercase;
}

.card-12__title {
  font-family: 'Caveat', cursive;
  font-size: 3rem;
  line-height: 0.95;
  color: #1f5c4d;
}

.card-12__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #5a6e66;
}

.card-12__flap {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 4;
  background: linear-gradient(135deg, #f7efe0, #e7dcc6);
  transform-origin: top right;
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1), height 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  box-shadow: none;
}

.card-12__secret {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 3;
  background: linear-gradient(135deg, #1f5c4d, #2f8f76);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1), height 0.45s cubic-bezier(0.16,1,0.3,1);
  display: grid;
  place-items: center;
}

.card-12__secret span {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 0.65rem;
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
  transform: rotate(45deg);
}

.card-12__card:hover .card-12__secret {
  width: 110px;
  height: 110px;
}

.card-12__card:hover .card-12__secret span {
  opacity: 1;
}

.card-12__card:hover .card-12__flap {
  width: 110px;
  height: 110px;
  box-shadow: -6px 6px 14px rgba(0,0,0,0.25);
}

@media (prefers-reduced-motion: reduce) {
  .card-12__flap,
    .card-12__secret,
    .card-12__secret span {
    transition: none !important;
  }
}
```

How this works

The card looks flat at rest with just a small triangle in the top-right corner suggesting a folded edge. On :hover, the triangle expands: a pseudo-element scales up while the underlying card face reveals a hidden layer (a secondary colour, a badge, extra text).

The peel effect uses clip-path: polygon() to shape the pseudo-element into a triangle whose vertices grow on hover. The transition animates the polygon coordinates — the corner peels back to reveal the layer beneath.

A matching shadow on the pseudo-element (filter: drop-shadow()) gives the peeled corner a real fold — without it, the shape reads as decorative rather than dimensional.

Make it yours

  • Move the peel to a different corner — swap polygon() vertices for top-left, bottom-right, or bottom-left variants.
  • Rebrand the revealed layer from --reveal-bg on .card-12; the peel triangle itself uses the card's front colour.
  • Tune peel size — small corner (10% expansion) for a subtle discount tag, large peel (40%) for a &ldquo;dogeared&rdquo; postcard look.
  • Add a text label inside the revealed area (SALE, NEW, 20% OFF) that fades in as the peel opens.
  • Change peel timing to a cubic-bezier with slight overshoot for a physical paper-tearing feel.

Gotchas — read before shipping

  • clip-path: polygon() is fully animatable — but only if both keyframes have the SAME number of vertices. Adding or removing a vertex mid-animation breaks the interpolation.
  • filter: drop-shadow() can be expensive on mobile — cap the blur radius under 8px and avoid animating the shadow itself.
  • The peel triangle should not intercept clicks meant for the card face — apply pointer-events: none to the pseudo-element.
  • Under prefers-reduced-motion, skip the peel animation and reveal the layer via opacity fade instead.
  • Ensure the underlying revealed content is meaningful (SALE, NEW, category badge) — decorative peel with nothing behind it feels like a broken card.

Browser support

ChromeSafariFirefoxEdge
55+9.1+54+55+

clip-path and filter: drop-shadow() are universally supported. Animated polygon() interpolation requires the same vertex count on both keyframes.

Techniques used in this demo

clip-pathMDN ↗radial-gradient()MDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →