36 CSS Stacked Cards34 / 36

Pure CSSMIT licensed

Peel Back

The top sticker-card curls away at the corner like peeling a label, revealing layers beneath. Vivid gradients with a folded-corner shadow. Eye-catching for reveals, "what’s inside" teasers, or onboarding.

Published Updated

Live Demo
Try it

The code

<div class="scd-34">
  <div class="scd-34__stage">
    <div class="scd-34__card scd-34__card--c3"><div class="scd-34__inner"><h3>Layer C</h3><p>Bottom of the stack</p></div></div>
    <div class="scd-34__card scd-34__card--c2"><div class="scd-34__inner"><h3>Layer B</h3><p>The middle ground</p></div></div>
    <div class="scd-34__card scd-34__card--c1"><div class="scd-34__inner"><h3>Peel me</h3><p>Hover to lift the top</p></div></div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Outfit:wght@400&display=swap');

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

.scd-34 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #ececec;
  font-family: 'Outfit', sans-serif;
}

.scd-34__stage {
  position: relative;
  width: 260px;
  height: 340px;
}

.scd-34__card {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), border-radius .7s;
  transform-origin: top right;
  cursor: pointer;
  overflow: hidden;
}

.scd-34__inner {
  position: absolute;
  inset: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

.scd-34__card h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.scd-34__card p {
  opacity: .85;
  margin-top: 6px;
}

.scd-34__card--c1 {
  background: linear-gradient(150deg,#ff6a3d,#f9484a);
  z-index: 3;
}

.scd-34__card--c2 {
  background: linear-gradient(150deg,#1fa2ff,#12d8fa);
  z-index: 2;
}

.scd-34__card--c3 {
  background: linear-gradient(150deg,#43e97b,#38f9d7);
  z-index: 1;
  color: #063;
}

.scd-34__stage:hover .scd-34__card--c1 {
  transform: rotate(-14deg) translate(-30px,-30px) scale(.78);
  border-radius: 22px 22px 22px 90px;
  box-shadow: -20px 20px 40px rgba(0,0,0,.3);
}

.scd-34__stage:hover .scd-34__card--c2 {
  transform: translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
  .scd-34__card {
    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 Stacked Card 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: Peel Back
Source: https://codefronts.com/components/css-stacked-cards/peel-back/

The top sticker-card curls away at the corner like peeling a label, revealing layers beneath. Vivid gradients with a folded-corner shadow. Eye-catching for reveals, "what’s inside" teasers, or onboarding.
## HTML
```html
<div class="scd-34">
  <div class="scd-34__stage">
    <div class="scd-34__card scd-34__card--c3"><div class="scd-34__inner"><h3>Layer C</h3><p>Bottom of the stack</p></div></div>
    <div class="scd-34__card scd-34__card--c2"><div class="scd-34__inner"><h3>Layer B</h3><p>The middle ground</p></div></div>
    <div class="scd-34__card scd-34__card--c1"><div class="scd-34__inner"><h3>Peel me</h3><p>Hover to lift the top</p></div></div>
  </div>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Outfit:wght@400&display=swap');

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

.scd-34 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #ececec;
  font-family: 'Outfit', sans-serif;
}

.scd-34__stage {
  position: relative;
  width: 260px;
  height: 340px;
}

.scd-34__card {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), border-radius .7s;
  transform-origin: top right;
  cursor: pointer;
  overflow: hidden;
}

.scd-34__inner {
  position: absolute;
  inset: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

.scd-34__card h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.scd-34__card p {
  opacity: .85;
  margin-top: 6px;
}

.scd-34__card--c1 {
  background: linear-gradient(150deg,#ff6a3d,#f9484a);
  z-index: 3;
}

.scd-34__card--c2 {
  background: linear-gradient(150deg,#1fa2ff,#12d8fa);
  z-index: 2;
}

.scd-34__card--c3 {
  background: linear-gradient(150deg,#43e97b,#38f9d7);
  z-index: 1;
  color: #063;
}

.scd-34__stage:hover .scd-34__card--c1 {
  transform: rotate(-14deg) translate(-30px,-30px) scale(.78);
  border-radius: 22px 22px 22px 90px;
  box-shadow: -20px 20px 40px rgba(0,0,0,.3);
}

.scd-34__stage:hover .scd-34__card--c2 {
  transform: translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
  .scd-34__card {
    transition: none !important;
  }
}
```

How this works

A sticker-style top card sits over a stack of layers beneath. The top card's top-right corner uses clip-path:polygon() traced to include a fold at the corner — the polygon vertices at that corner are inset, creating the illusion of a peeled edge.

On hover, the polygon vertices animate outward — the corner curl deepens and reveals more of the card beneath. A matching filter:drop-shadow() on the pseudo-element gives the peeled corner a real fold shadow.

Below the top card, the next layer has a vivid gradient that's only visible through the peeled corner at rest, and increasingly through the enlarged peel on hover.

Make it yours

  • Move the peel to any corner — swap the polygon() coordinates for top-left, bottom-right, or bottom-left variants.
  • Rebrand the top sticker and revealed underlayer from CSS custom properties on the wrapper.
  • Tune peel size — small corner (10% inset) for a subtle sticker-lift, large (40%) for a dogeared postcard.
  • 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 animatable ONLY when both keyframes have the same vertex count — adding or removing a vertex breaks interpolation.
  • filter:drop-shadow() is 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 underlying card face — apply pointer-events:none to the pseudo-element.
  • Under prefers-reduced-motion:reduce, skip the peel animation and reveal the underlayer via opacity fade instead.
  • Ensure the underlying revealed content is meaningful (SALE, NEW, discount code) — 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 matching vertex counts.

Techniques used in this demo

place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →