{ CF }
22 examples Responsive intermediate

22 CSS Stacked Card Designs

componentscss-only

A CSS stacked-card layout renders multiple cards as a 3D depth-stack instead of a flat row or grid. These 22 hand-coded designs are ready-to-ship card stacks for testimonial carousels, recently-viewed items, onboarding decks, and pricing comparisons — copy the markup, drop in your content, and ship.

22 unique stacks 16 Pure CSS 6 CSS + JS WCAG-friendly Mobile-first MIT licensed Published
01 / 22
Classic Deck
CSS + JS
MEMO 03

Notes

3 items

MEMO 02

Tasks

7 items

MEMO 01

Inbox

12 messages

Brutalist memo deck — riso-red index cards on cream stock with chunky ink labels. Click anywhere to cycle the front card to the back.
Try it 
.scd-deck {
  position: relative; width: 220px; height: 150px; margin: 0 auto;
  cursor: pointer;
}
.scd-deck__c {
  position: absolute; inset: 0;
  background: #f4ead0;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
  border-radius: 4px; padding: 14px 16px;
  box-shadow: 6px 6px 0 #0a0a0a;
  transform: translate(calc(var(--i) * -10px), calc(var(--i) * -10px));
  z-index: calc(10 - var(--i));
  transition: transform .45s cubic-bezier(.3,1.2,.4,1), z-index 0s .22s;
}
.scd-deck__c:nth-child(1) { background: #ee3333; color: #f4ead0; }
.scd-deck__c:nth-child(2) { background: #f4ead0; }
.scd-deck__c:nth-child(3) { background: #1a1a1a; color: #f4ead0; }
.scd-deck__tag { font: 700 9px/1 ui-monospace, monospace; letter-spacing: 0.18em; opacity: 0.7; }
.scd-deck__c h4 { margin: 6px 0 4px; font: 900 18px/1 system-ui, sans-serif; letter-spacing: -0.02em; }
.scd-deck__c p  { margin: 0; font: 12px/1 system-ui, sans-serif; opacity: 0.78; }
<div class="scd-deck scd-cycle" tabindex="0">
  <div class="scd-deck__c" style="--i:2"><span class="scd-deck__tag">MEMO 03</span><h4>Notes</h4><p>3 items</p></div>
  <div class="scd-deck__c" style="--i:1"><span class="scd-deck__tag">MEMO 02</span><h4>Tasks</h4><p>7 items</p></div>
  <div class="scd-deck__c" style="--i:0"><span class="scd-deck__tag">MEMO 01</span><h4>Inbox</h4><p>12 messages</p></div>
</div>
/* Click-to-cycle: send the front card to the back of the deck. */
document.querySelectorAll('.scd-cycle').forEach(function(stack) {
  stack.addEventListener('click', function() {
    var cards = Array.from(stack.children);
    var max = cards.length - 1;
    cards.forEach(function(card) {
      var current = parseInt(card.style.getPropertyValue('--i') || '0', 10);
      var next = current === 0 ? max : current - 1;
      card.style.setProperty('--i', next);
    });
  });
});
02 / 22
Fan Spread
CSS + JS
XVII★The Star
I☽The Magician
XIX☉The Sun
Three tarot cards angled like a reading — aged parchment with midnight-blue backs and gold-foil arcana glyphs. Click to cycle.
Try it 
.scd-fan {
  position: relative; width: 240px; height: 180px; margin: 0 auto;
  cursor: pointer;
}
.scd-fan__c {
  position: absolute; left: 50%; top: 50%;
  width: 88px; height: 130px; margin: -65px 0 0 -44px;
  background: #e8d4a2; color: #1a1d4a;
  border: 1.5px solid #1a1d4a; border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 8px 6px;
  box-shadow: 0 8px 18px -8px rgba(26,29,74,0.5), inset 0 0 0 4px #e8d4a2, inset 0 0 0 5px #d4a017;
  transition: transform .5s cubic-bezier(.3,1.2,.4,1), z-index 0s .25s;
  z-index: calc(10 - var(--i));
}
.scd-fan__roman { font: 700 10px/1 ui-serif, Georgia; letter-spacing: 0.18em; }
.scd-fan__glyph { font-size: 36px; line-height: 1; color: #d4a017; }
.scd-fan__name { font: 700 9px/1 ui-serif, Georgia; letter-spacing: 0.04em; text-align: center; }
.scd-fan__c[data-i="0"] { transform: rotate(-14deg) translate(-52px, 6px); }
.scd-fan__c[data-i="1"] { transform: rotate(0deg) translateY(-10px); z-index: 12; }
.scd-fan__c[data-i="2"] { transform: rotate(14deg) translate(52px, 6px); }
<div class="scd-fan scd-cycle" tabindex="0">
  <div class="scd-fan__c" data-i="0" style="--i:0"><span class="scd-fan__roman">XVII</span><span class="scd-fan__glyph">★</span><span class="scd-fan__name">The Star</span></div>
  <div class="scd-fan__c" data-i="1" style="--i:1"><span class="scd-fan__roman">I</span><span class="scd-fan__glyph">☽</span><span class="scd-fan__name">The Magician</span></div>
  <div class="scd-fan__c" data-i="2" style="--i:2"><span class="scd-fan__roman">XIX</span><span class="scd-fan__glyph">☉</span><span class="scd-fan__name">The Sun</span></div>
</div>
/* Click-to-cycle the fan: rotate cards through positions. */
document.querySelectorAll('.scd-fan.scd-cycle').forEach(function(stack) {
  stack.addEventListener('click', function() {
    var cards = Array.from(stack.children);
    var max = cards.length - 1;
    cards.forEach(function(card) {
      var current = parseInt(card.dataset.i || '0', 10);
      var next = current === 0 ? max : current - 1;
      card.dataset.i = next;
      card.style.setProperty('--i', next);
    });
  });
});
03 / 22
Tilted Polaroids
CSS + JS
22A · F1.4
23A · F2.8
24A · F5.6
A pile of 35mm filmstrip negatives — sepia frames with sprocket holes and Kodachrome amber tones. Click to send the top frame to the bottom.
Try it 
.scd-tilt {
  position: relative; width: 240px; height: 190px; margin: 0 auto;
  display: flex; justify-content: center; align-items: center;
  cursor: pointer;
}
.scd-tilt__c {
  position: absolute;
  width: 116px; padding: 10px 8px 22px;
  background: #2a1d0e;
  border-radius: 2px;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; gap: 6px;
  transform: translate(calc((var(--i) - 1) * 18px), calc(var(--i) * 6px)) rotate(calc((var(--i) - 1) * 9deg));
  z-index: calc(10 - var(--i));
  transition: transform .5s cubic-bezier(.3,1.2,.4,1), z-index 0s .25s;
  background-image:
    radial-gradient(circle 3px at 8px 8px,  #fff8e7 99%, transparent 100%),
    radial-gradient(circle 3px at 28px 8px, #fff8e7 99%, transparent 100%),
    radial-gradient(circle 3px at 48px 8px, #fff8e7 99%, transparent 100%),
    radial-gradient(circle 3px at 68px 8px, #fff8e7 99%, transparent 100%),
    radial-gradient(circle 3px at 88px 8px, #fff8e7 99%, transparent 100%),
    radial-gradient(circle 3px at 108px 8px, #fff8e7 99%, transparent 100%);
  background-repeat: no-repeat;
}
.scd-tilt__strip {
  width: 100%; height: 86px; border-radius: 1px; margin-top: 8px;
  background: var(--ph);
  filter: sepia(0.4) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.scd-tilt__c span {
  font: 700 9px ui-monospace, monospace;
  color: #fcb938; text-align: center; letter-spacing: 0.16em;
}
<div class="scd-tilt scd-cycle" tabindex="0">
  <div class="scd-tilt__c" style="--i:0">
    <div class="scd-tilt__strip" style="--ph:linear-gradient(135deg,#fcb938,#704830)"></div>
    <span>22A · F1.4</span>
  </div>
  <div class="scd-tilt__c" style="--i:1">
    <div class="scd-tilt__strip" style="--ph:linear-gradient(135deg,#704830,#3a2410)"></div>
    <span>23A · F2.8</span>
  </div>
  <div class="scd-tilt__c" style="--i:2">
    <div class="scd-tilt__strip" style="--ph:linear-gradient(135deg,#fff8e7,#fcb938)"></div>
    <span>24A · F5.6</span>
  </div>
</div>
/* Click-to-cycle the filmstrip pile: front frame goes to the back. */
document.querySelectorAll('.scd-tilt.scd-cycle').forEach(function(stack) {
  stack.addEventListener('click', function() {
    var cards = Array.from(stack.children);
    var max = cards.length - 1;
    cards.forEach(function(card) {
      var current = parseInt(card.style.getPropertyValue('--i') || '0', 10);
      var next = current === 0 ? max : current - 1;
      card.style.setProperty('--i', next);
    });
  });
});
04 / 22
Staircase Bricks
CSS + JS
Q1 Plan
Q2 Build
Q3 Ship
Q4 Scale
Subway-tile platform stack — white-tile bricks with a green metro stripe and station-style numbering. Click to rotate the bottom brick to the top.
Try it 
.scd-brick {
  position: relative; width: 240px; height: 200px; margin: 0 auto;
  cursor: pointer;
}
.scd-brick__c {
  position: absolute;
  width: 134px; height: 40px;
  background: #f0f0e8;
  color: #1a1a1a;
  border-radius: 2px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  font: 700 12px system-ui, sans-serif;
  box-shadow:
    inset 0 -3px 0 #1d6b3a,
    inset 1px 1px 0 rgba(255,255,255,0.9),
    0 4px 0 #3d3d40,
    0 6px 14px -3px rgba(0,0,0,0.4);
  bottom: calc(var(--i) * 36px);
  left: calc(var(--i) * 26px);
  z-index: var(--i);
  transition: bottom .5s cubic-bezier(.3,1.2,.4,1), left .5s cubic-bezier(.3,1.2,.4,1);
}
.scd-brick__c span {
  background: #1d6b3a; color: #f0f0e8;
  font: 700 10px ui-monospace, monospace;
  padding: 3px 6px; border-radius: 2px; letter-spacing: 0.08em;
}
<div class="scd-brick scd-cycle" tabindex="0">
  <div class="scd-brick__c" style="--i:0"><span>Q1</span> Plan</div>
  <div class="scd-brick__c" style="--i:1"><span>Q2</span> Build</div>
  <div class="scd-brick__c" style="--i:2"><span>Q3</span> Ship</div>
  <div class="scd-brick__c" style="--i:3"><span>Q4</span> Scale</div>
</div>
/* Click-to-cycle the staircase: bottom brick rotates to top. */
document.querySelectorAll('.scd-brick.scd-cycle').forEach(function(stack) {
  stack.addEventListener('click', function() {
    var cards = Array.from(stack.children);
    var max = cards.length - 1;
    cards.forEach(function(card) {
      var current = parseInt(card.style.getPropertyValue('--i') || '0', 10);
      var next = current === 0 ? max : current - 1;
      card.style.setProperty('--i', next);
    });
  });
});
05 / 22
Perspective Deck
CSS + JS
015
014
013
012
Holographic trading cards with iridescent cyan→magenta sheen and pearl borders — click to send the front card receding into the back.
Try it 
.scd-persp {
  position: relative; width: 220px; height: 170px; margin: 0 auto;
  perspective: 600px; transform-style: preserve-3d;
  cursor: pointer;
}
.scd-persp__c {
  position: absolute; left: 50%; top: 50%;
  width: 144px; height: 96px; margin: -48px 0 0 -72px;
  background:
    linear-gradient(115deg, #00ffff 0%, #ff00ff 35%, #00ffff 65%, #ff00ff 100%),
    #e6f0ff;
  background-size: 220% 100%;
  background-position: calc(var(--i) * 28%) center;
  border: 2px solid #e6f0ff;
  border-radius: 10px;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px -8px rgba(0,255,255,0.4), inset 0 0 0 1px rgba(255,255,255,0.5);
  transform: translateZ(calc(var(--i) * -22px)) translateY(calc(var(--i) * -10px));
  filter: brightness(calc(1 - var(--i) * 0.1));
  z-index: calc(10 - var(--i));
  transition: transform .55s cubic-bezier(.3,1.2,.4,1), filter .4s, z-index 0s .27s;
}
.scd-persp__c span {
  font: 900 28px/1 ui-monospace, monospace;
  color: #1a0033;
  background: rgba(255,255,255,0.85);
  padding: 6px 14px; border-radius: 6px;
  letter-spacing: 0.06em;
}
<div class="scd-persp scd-cycle" tabindex="0">
  <div class="scd-persp__c" style="--i:3"><span>015</span></div>
  <div class="scd-persp__c" style="--i:2"><span>014</span></div>
  <div class="scd-persp__c" style="--i:1"><span>013</span></div>
  <div class="scd-persp__c" style="--i:0"><span>012</span></div>
</div>
/* Click-to-cycle the holo deck: front card recedes. */
document.querySelectorAll('.scd-persp.scd-cycle').forEach(function(stack) {
  stack.addEventListener('click', function() {
    var cards = Array.from(stack.children);
    var max = cards.length - 1;
    cards.forEach(function(card) {
      var current = parseInt(card.style.getPropertyValue('--i') || '0', 10);
      var next = current === 0 ? max : current - 1;
      card.style.setProperty('--i', next);
    });
  });
});
06 / 22
Hover Spread
Pure CSS
$1
$5
$10
$25
$100
A casino chip rack on green felt — chips stacked tight at center; hover spreads them into a fan with denomination markings.
Try it 
.scd-spread {
  position: relative;
  width: 320px; height: 140px; margin: 0 auto;
  background: radial-gradient(ellipse at center, #0d6048 0%, #0a4f3c 100%);
  border-radius: 70px;
  cursor: pointer;
  display: grid; place-items: center;
}
.scd-spread__c {
  position: absolute;
  left: 50%; top: 50%;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 800 12px ui-monospace, monospace;
  color: #0a0a0a;
  background:
    repeating-conic-gradient(from 0deg, var(--c1) 0deg 15deg, var(--c2) 15deg 30deg);
  border: 3px solid var(--c2);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.45), inset 0 0 0 6px var(--c1), inset 0 0 0 8px var(--c2);
  transform: translateX(calc((var(--i) - 2) * 4px)) translateY(calc(var(--i) * -2px));
  transition: transform .5s cubic-bezier(.3,1.3,.5,1);
  z-index: calc(10 - var(--i));
}
.scd-spread__c:nth-child(1) { --c1: #f8e8c8; --c2: #d4b86a; }
.scd-spread__c:nth-child(2) { --c1: #b91c1c; --c2: #f8e8c8; color: #fff; }
.scd-spread__c:nth-child(3) { --c1: #1a4d8f; --c2: #f8e8c8; color: #fff; }
.scd-spread__c:nth-child(4) { --c1: #3d8a4a; --c2: #f8e8c8; color: #fff; }
.scd-spread__c:nth-child(5) { --c1: #1a1a1a; --c2: #d4a017; color: #d4a017; }
.scd-spread:hover .scd-spread__c {
  transform: translateX(calc((var(--i) - 2) * 56px)) translateY(0);
}
<div class="scd-spread">
  <div class="scd-spread__c" style="--i:0">$1</div>
  <div class="scd-spread__c" style="--i:1">$5</div>
  <div class="scd-spread__c" style="--i:2">$10</div>
  <div class="scd-spread__c" style="--i:3">$25</div>
  <div class="scd-spread__c" style="--i:4">$100</div>
</div>
07 / 22
Cascade Lift
Pure CSS
2026 — Q13 events
2026 — Q21 event
2026 — Q35 events
2026 — Q42 events
Manila folder index — kraft-paper folders with green tab labels stacked tight; hover lifts them into a staggered cascade.
Try it 
.scd-casc { position: relative; width: 220px; height: 200px; margin: 0 auto; cursor: pointer; }
.scd-casc__c {
  position: absolute; left: 50%; bottom: 0;
  width: 200px; height: 56px; margin-left: -100px;
  background: #d4b86a;
  color: #1a1a1a;
  border-radius: 2px 8px 2px 2px;
  padding: 14px 18px 10px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 3px 6px -1px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
  transform: translateY(calc(var(--i) * -10px));
  transition: transform .4s cubic-bezier(.3,1.3,.5,1);
  z-index: calc(10 - var(--i));
}
.scd-casc__c::before {
  content: '';
  position: absolute; top: -10px; right: 14px;
  width: 56px; height: 12px;
  background: #2a4d3a;
  border-radius: 4px 4px 0 0;
}
.scd-casc:hover .scd-casc__c { transform: translateY(calc(var(--i) * -56px)); }
.scd-casc__c b    { font: 700 12px/1 ui-monospace, monospace; letter-spacing: 0.04em; }
.scd-casc__c span { font: 11px/1 system-ui; color: #4a3d20; }
<div class="scd-casc">
  <div class="scd-casc__c" style="--i:0"><b>2026 — Q1</b><span>3 events</span></div>
  <div class="scd-casc__c" style="--i:1"><b>2026 — Q2</b><span>1 event</span></div>
  <div class="scd-casc__c" style="--i:2"><b>2026 — Q3</b><span>5 events</span></div>
  <div class="scd-casc__c" style="--i:3"><b>2026 — Q4</b><span>2 events</span></div>
</div>
08 / 22
Peel Back
Pure CSS
JK

RSVP

You are cordially invited.

CF — Hover to open —
A wax-sealed envelope — cream cover with serif copperplate; hover peels the flap to reveal a scarlet wax seal beneath.
Try it 
.scd-peel { position: relative; width: 200px; height: 140px; margin: 0 auto; perspective: 1000px; cursor: pointer; }
.scd-peel__back, .scd-peel__front {
  position: absolute; inset: 0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  text-align: center;
}
.scd-peel__back {
  background: #faf3e3;
  color: #1a1a1a; padding: 16px;
  border: 1px solid #d4c8a3;
}
.scd-peel__seal {
  width: 38px; height: 38px;
  background: radial-gradient(circle at 35% 30%, #c44, #8b1a1a);
  color: #faf3e3;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 900 13px ui-serif, Georgia;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset -2px -3px 4px rgba(0,0,0,0.3);
  margin-bottom: 6px;
}
.scd-peel__back h4 { margin: 0; font: 700 14px/1 ui-serif, Georgia; letter-spacing: 0.18em; }
.scd-peel__back p  { margin: 0; font: italic 11px/1.4 ui-serif, Georgia; color: #5a4a30; }
.scd-peel__front {
  background: #faf3e3;
  color: #1a1a1a;
  border: 1px solid #d4c8a3;
  transform-origin: top right;
  transition: transform .5s cubic-bezier(.3,1,.3,1);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.45);
}
.scd-peel__front::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, transparent 49%, #d4c8a3 49.5%, transparent 50.5%);
}
.scd-peel__monogram {
  font: 900 26px/1 ui-serif, Georgia; color: #8b1a1a; letter-spacing: 0.08em;
  border: 1.5px solid #8b1a1a; padding: 4px 10px; border-radius: 2px;
}
.scd-peel__line { font: italic 10px/1 ui-serif, Georgia; color: #5a4a30; letter-spacing: 0.12em; }
.scd-peel:hover .scd-peel__front { transform: rotate3d(-1, 1, 0, 75deg); }
<div class="scd-peel">
  <div class="scd-peel__back">
    <div class="scd-peel__seal">JK</div>
    <h4>RSVP</h4>
    <p>You are cordially invited.</p>
  </div>
  <div class="scd-peel__front">
    <span class="scd-peel__monogram">CF</span>
    <span class="scd-peel__line">— Hover to open —</span>
  </div>
</div>
09 / 22
Accordion Spread
Pure CSS
SAFFRON
PAPRIKA
TURMERIC
CARDAMOM
Spice-market labels — saffron, paprika, turmeric, cardamom strips compressed flat; hover expands the active strip with its name in full.
Try it 
.scd-acc {
  display: flex; gap: 0;
  width: 240px; height: 140px; margin: 0 auto;
  border: 2px solid #1a1a1a; border-radius: 4px; overflow: hidden;
  cursor: pointer;
  background: #1a1a1a;
}
.scd-acc__c {
  flex: 1;
  background: var(--c);
  color: var(--t);
  display: flex; align-items: center; justify-content: center;
  font: 800 11px/1 ui-monospace, monospace;
  letter-spacing: 0.22em;
  writing-mode: vertical-rl; transform: rotate(180deg);
  transition: flex .45s cubic-bezier(.3,1,.3,1);
  border-right: 2px solid #1a1a1a;
  position: relative;
}
.scd-acc__c:last-child { border-right: none; }
.scd-acc__c::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px dashed currentColor; opacity: 0.3;
  pointer-events: none;
}
.scd-acc__c:hover { flex: 5; writing-mode: horizontal-tb; transform: none; letter-spacing: 0.32em; }
<div class="scd-acc">
  <div class="scd-acc__c" style="--c:#e8a02e; --t:#3a2a0a">SAFFRON</div>
  <div class="scd-acc__c" style="--c:#c44e2e; --t:#fff">PAPRIKA</div>
  <div class="scd-acc__c" style="--c:#f4c430; --t:#3a2a0a">TURMERIC</div>
  <div class="scd-acc__c" style="--c:#3a5a3d; --t:#fff">CARDAMOM</div>
</div>
10 / 22
Shuffle Reveal
Pure CSS
Side A
12" LP
33⅓
Three vinyl record sleeves — red, cobalt, and warm-yellow LP covers; hover slides the front sleeve out at an angle to expose the next.
Try it 
.scd-shuf { position: relative; width: 220px; height: 170px; margin: 0 auto; cursor: pointer; }
.scd-shuf__c {
  position: absolute; left: 50%; top: 50%;
  width: 132px; height: 132px; margin: -66px 0 0 -66px;
  background: var(--bg);
  border-radius: 4px;
  color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.2);
  transform: translateY(calc(var(--i) * -8px)) translateX(calc(var(--i) * -4px));
  transition: transform .5s cubic-bezier(.3,1.4,.4,1);
  z-index: calc(10 - var(--i));
  overflow: hidden;
}
.scd-shuf__c::before {
  content: '';
  position: absolute; inset: 16px;
  background:
    radial-gradient(circle at center, #1a1a1a 0%, #1a1a1a 38%, transparent 38.5%),
    repeating-radial-gradient(circle at center, #1a1a1a 0 1px, transparent 1px 3px);
  border-radius: 50%;
}
.scd-shuf__hole {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--bg); border-radius: 50%;
  z-index: 2;
}
.scd-shuf__label {
  position: relative; z-index: 3;
  font: 800 10px ui-monospace, monospace;
  color: var(--bg);
  background: #1a1a1a;
  padding: 3px 8px; border-radius: 2px;
  letter-spacing: 0.14em;
  margin-top: 38px;
}
.scd-shuf:hover .scd-shuf__c { transform: translateY(calc((var(--i) - 1) * -8px)) translateX(calc((var(--i) - 1) * -4px)); }
.scd-shuf:hover .scd-shuf__c[style*="--i:0"] { transform: translate(140%, -10px) rotate(16deg); }
<div class="scd-shuf">
  <div class="scd-shuf__c" style="--i:2; --bg:#cc3232"><span class="scd-shuf__hole"></span><span class="scd-shuf__label">Side A</span></div>
  <div class="scd-shuf__c" style="--i:1; --bg:#1942a3"><span class="scd-shuf__hole"></span><span class="scd-shuf__label">12" LP</span></div>
  <div class="scd-shuf__c" style="--i:0; --bg:#f0c040"><span class="scd-shuf__hole"></span><span class="scd-shuf__label">33⅓</span></div>
</div>
11 / 22
Tab Stack
Pure CSS
Library catalog cards — cream cardstock with a red Dewey stamp and olive index lines. Click any card to bring it to the front.
Try it 
.scd-tab { position: relative; width: 220px; height: 160px; margin: 0 auto; }
.scd-tab > input { display: none; }
.scd-tab__c {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 116px; margin: -58px 0 0 -100px;
  background: #ede4cf;
  color: #1a1a1a;
  border: 1px solid #c4b896;
  border-radius: 2px;
  padding: 14px 18px;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.35);
  background-image: repeating-linear-gradient(0deg, transparent 0 18px, #c4b89640 18px 19px);
  transition: transform .4s cubic-bezier(.3,1.3,.5,1);
}
.scd-tab__c[data-i="0"] { transform: translateY(0)    scale(1);    z-index: 3; }
.scd-tab__c[data-i="1"] { transform: translateY(-10px) scale(0.94); z-index: 2; }
.scd-tab__c[data-i="2"] { transform: translateY(-20px) scale(0.88); z-index: 1; }
#scd-tab-1:checked ~ [data-i="0"] { transform: translateY(0) scale(1); z-index: 3; }
#scd-tab-2:checked ~ [data-i="1"] { transform: translateY(0) scale(1); z-index: 3; }
#scd-tab-2:checked ~ [data-i="0"] { transform: translateY(20px) scale(0.88); z-index: 1; }
#scd-tab-3:checked ~ [data-i="2"] { transform: translateY(0) scale(1); z-index: 3; }
#scd-tab-3:checked ~ [data-i="1"] { transform: translateY(20px) scale(0.88); z-index: 1; }
#scd-tab-3:checked ~ [data-i="0"] { transform: translateY(40px) scale(0.78); z-index: 0; opacity: 0.5; }
.scd-tab__call {
  display: inline-block;
  background: #a32424; color: #ede4cf;
  font: 700 10px ui-monospace, monospace; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 2px;
  margin-bottom: 6px;
}
.scd-tab__c h4 { margin: 0 0 4px; font: 700 14px/1.1 ui-serif, Georgia; color: #4d5435; }
.scd-tab__c p  { margin: 0; font: italic 11px/1.5 ui-serif, Georgia; color: #5a4a30; }
<div class="scd-tab">
  <input type="radio" name="scd-tab" id="scd-tab-1" checked>
  <input type="radio" name="scd-tab" id="scd-tab-2">
  <input type="radio" name="scd-tab" id="scd-tab-3">
  <label for="scd-tab-1" class="scd-tab__c" data-i="0"><span class="scd-tab__call">823.91</span><h4>Atlas of Birds</h4><p>Audubon · 1827</p></label>
  <label for="scd-tab-2" class="scd-tab__c" data-i="1"><span class="scd-tab__call">711.40</span><h4>Italian Cities</h4><p>Calvino · 1972</p></label>
  <label for="scd-tab-3" class="scd-tab__c" data-i="2"><span class="scd-tab__call">510.92</span><h4>Pure Logic</h4><p>Russell · 1903</p></label>
</div>
12 / 22
Photos Pinch
Pure CSS
Pantone color-of-the-year swatches — Mustard Yellow, Tangerine, Ultra Violet, Classic Blue. Click any swatch to pull it forward.
Try it 
.scd-photo { position: relative; width: 240px; height: 180px; margin: 0 auto; }
.scd-photo > input { display: none; }
.scd-photo__c {
  position: absolute; left: 50%; top: 50%;
  width: 92px; height: 132px; margin: -66px 0 0 -46px;
  background: #fafaf5;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.35);
  transition: transform .45s cubic-bezier(.3,1,.3,1), box-shadow .4s;
  z-index: calc(10 - var(--i));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.scd-photo__c::before {
  content: '';
  display: block;
  height: 86px;
  background: var(--bg);
}
.scd-photo__num {
  font: 700 9px/1 ui-monospace, monospace;
  color: #1a1a1a; padding: 8px 10px 2px;
  letter-spacing: 0.06em;
}
.scd-photo__nm {
  font: 800 11px/1 system-ui, sans-serif;
  color: #1a1a1a; padding: 0 10px;
  letter-spacing: 0.02em;
}
.scd-photo__c[data-i="0"] { transform: translateX(-78px) translateY(8px) rotate(-12deg); }
.scd-photo__c[data-i="1"] { transform: translateX(-26px) translateY(-4px) rotate(-4deg); }
.scd-photo__c[data-i="2"] { transform: translateX(26px) translateY(-4px) rotate(4deg); }
.scd-photo__c[data-i="3"] { transform: translateX(78px) translateY(8px) rotate(12deg); }
#scd-photo-1:checked ~ [data-i="0"],
#scd-photo-2:checked ~ [data-i="1"],
#scd-photo-3:checked ~ [data-i="2"],
#scd-photo-4:checked ~ [data-i="3"] {
  transform: translate(0, 0) rotate(0) scale(1.08);
  z-index: 20;
  box-shadow: 0 16px 36px -10px rgba(0,0,0,0.5);
}
<div class="scd-photo">
  <input type="radio" name="scd-photo" id="scd-photo-1" checked>
  <input type="radio" name="scd-photo" id="scd-photo-2">
  <input type="radio" name="scd-photo" id="scd-photo-3">
  <input type="radio" name="scd-photo" id="scd-photo-4">
  <label for="scd-photo-1" class="scd-photo__c" data-i="0" style="--bg:#e8b03e"><span class="scd-photo__num">PMS 7549</span><span class="scd-photo__nm">Mustard</span></label>
  <label for="scd-photo-2" class="scd-photo__c" data-i="1" style="--bg:#dd5a2c"><span class="scd-photo__num">17-1463</span><span class="scd-photo__nm">Tangerine</span></label>
  <label for="scd-photo-3" class="scd-photo__c" data-i="2" style="--bg:#5f4b8b"><span class="scd-photo__num">18-3838</span><span class="scd-photo__nm">Ultra Violet</span></label>
  <label for="scd-photo-4" class="scd-photo__c" data-i="3" style="--bg:#0f4c81"><span class="scd-photo__num">19-4052</span><span class="scd-photo__nm">Classic Blue</span></label>
</div>
13 / 22
Swipe Stack
CSS + JS
SFO → JFKUA · 423
Boarding-pass deck — airline navy with a magenta edge stripe and monospace flight code. Click the top pass to swipe it away; loops every 1.5s.
Try it 
.scd-swipe { position: relative; width: 220px; height: 170px; margin: 0 auto; }
.scd-swipe > input { display: none; }
.scd-swipe__c {
  position: absolute; left: 50%; top: 50%;
  width: 184px; height: 124px; margin: -62px 0 0 -92px;
  background: #0c2340;
  color: #fdf6e9;
  border-left: 6px solid #e84a8a;
  border-radius: 4px;
  padding: 18px 20px;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 8px 22px -8px rgba(12,35,64,0.55);
  transform: translateY(calc(var(--i) * -10px)) scale(calc(1 - var(--i) * 0.05));
  transition: transform .5s cubic-bezier(.3,1,.3,1), opacity .4s;
  z-index: calc(10 - var(--i));
}
.scd-swipe__hd {
  font: 800 16px/1 ui-monospace, monospace;
  letter-spacing: 0.06em;
}
.scd-swipe__ft {
  font: 700 10px/1 ui-monospace, monospace;
  color: #e84a8a; letter-spacing: 0.18em;
  border-top: 1px dashed rgba(253,246,233,0.3);
  padding-top: 8px;
}
#scd-swipe-1:checked ~ [data-card="1"] { transform: translate(180%, -30px) rotate(20deg); opacity: 0; }
#scd-swipe-2:checked ~ [data-card="2"] { transform: translate(-180%, -30px) rotate(-20deg); opacity: 0; }
<div class="scd-swipe">
  <input type="checkbox" id="scd-swipe-1">
  <input type="checkbox" id="scd-swipe-2">
  <div class="scd-swipe__c" style="--i:2"><span class="scd-swipe__hd">SFO → JFK</span><span class="scd-swipe__ft">UA · 423</span></div>
  <label for="scd-swipe-2" class="scd-swipe__c" data-card="2" style="--i:1"><span class="scd-swipe__hd">LHR → CDG</span><span class="scd-swipe__ft">BA · 304</span></label>
  <label for="scd-swipe-1" class="scd-swipe__c" data-card="1" style="--i:0"><span class="scd-swipe__hd">NRT → SIN</span><span class="scd-swipe__ft">JL · 711</span></label>
</div>
/* Auto-reset the swipe stack 1.5s after a card is dismissed
   so the demo loops continuously. */
document.querySelectorAll('.scd-swipe').forEach(function(stack) {
  var inputs = stack.querySelectorAll('input[type="checkbox"]');
  inputs.forEach(function(input) {
    input.addEventListener('change', function() {
      if (input.checked) {
        setTimeout(function() { input.checked = false; }, 1500);
      }
    });
  });
});
14 / 22
Accordion Card
Pure CSS
Cassette J-card stack — hot-pink, electric-teal, and neon-yellow 90s hi-fi liners. Click any to expand its A/B side track listing.
Try it 
.scd-accc {
  display: flex; flex-direction: column; gap: 4px;
  width: 240px; margin: 0 auto;
}
.scd-accc > input { display: none; }
.scd-accc__c {
  background: var(--c);
  color: var(--t);
  border-radius: 0;
  border-left: 4px solid #0a0a14;
  border-right: 4px solid #0a0a14;
  padding: 10px 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  height: 26px; overflow: hidden;
  transition: height .35s cubic-bezier(.3,1.3,.5,1);
  font-family: ui-monospace, monospace;
}
.scd-accc__c b    { font: 800 11px/1 ui-monospace, monospace; letter-spacing: 0.18em; }
.scd-accc__c span { font: 11px/1.4 ui-monospace, monospace; opacity: 0.85; }
#scd-accc-1:checked ~ .scd-accc__c:nth-of-type(1),
#scd-accc-2:checked ~ .scd-accc__c:nth-of-type(2),
#scd-accc-3:checked ~ .scd-accc__c:nth-of-type(3) {
  height: 78px;
}
<div class="scd-accc">
  <input type="radio" name="scd-accc" id="scd-accc-1" checked>
  <input type="radio" name="scd-accc" id="scd-accc-2">
  <input type="radio" name="scd-accc" id="scd-accc-3">
  <label for="scd-accc-1" class="scd-accc__c" style="--c:#ff3d83; --t:#fff"><b>SIDE A · 90 MIN</b><span>1. Saturday Night · 4:21</span><span>2. Late Bloomer · 3:18</span></label>
  <label for="scd-accc-2" class="scd-accc__c" style="--c:#00d4d4; --t:#0a0a14"><b>SIDE B · 60 MIN</b><span>1. Cobalt Hour · 5:04</span><span>2. Chrome Eyes · 4:11</span></label>
  <label for="scd-accc-3" class="scd-accc__c" style="--c:#fef34c; --t:#0a0a14"><b>BONUS · 30 MIN</b><span>1. Mixtape Outro · 2:48</span><span>2. Studio Banter · 1:16</span></label>
</div>
15 / 22
Timeline Stack
Pure CSS
Founded
Series A
10k Users
Architectural blueprint scroll — chalk-white milestone cards on cyanotype navy with grid-paper backdrop and dimensional dots.
Try it 
.scd-tl {
  position: relative; width: 240px; padding: 16px 16px 16px 32px;
  margin: 0 auto;
  background: #0c4a8a;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
}
.scd-tl::before {
  content: ''; position: absolute; left: 16px; top: 22px; bottom: 22px;
  width: 2px; background: rgba(255,255,255,0.5);
}
.scd-tl__c {
  position: relative;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.25);
  color: #f0f5fa;
  padding: 8px 12px; margin-bottom: 6px;
  border-radius: 2px;
  display: flex; gap: 12px; align-items: center;
  transform: translateX(calc(var(--i) * 4px));
}
.scd-tl__c:last-child { margin-bottom: 0; }
.scd-tl__c::before {
  content: ''; position: absolute; left: -22px; top: 50%;
  width: 10px; height: 10px;
  background: #f0f5fa; transform: translateY(-50%);
  box-shadow: 0 0 0 2px #0c4a8a, 0 0 0 4px rgba(240,245,250,0.5);
}
.scd-tl__c time { font: 700 10px ui-monospace, monospace; opacity: 0.7; letter-spacing: 0.1em; }
.scd-tl__c b    { font: 700 12px ui-monospace, monospace; letter-spacing: 0.04em; }
<div class="scd-tl">
  <div class="scd-tl__c" style="--i:0"><time>2024.09</time><b>Founded</b></div>
  <div class="scd-tl__c" style="--i:1"><time>2025.04</time><b>Series A</b></div>
  <div class="scd-tl__c" style="--i:2"><time>2026.02</time><b>10k Users</b></div>
</div>
16 / 22
Isometric Tower
Pure CSS
WEB-01
API-02
DB-03
CACHE-04
Server rack tower — graphite metal slabs with green LED indicators stacked in isometric projection.
Try it 
.scd-iso {
  position: relative; width: 200px; height: 180px; margin: 6px auto 0;
  transform: rotateX(55deg) rotateZ(-30deg); transform-style: preserve-3d;
}
.scd-iso__c {
  position: absolute; left: 50%; top: 50%;
  width: 130px; height: 28px; margin: -14px 0 0 -65px;
  background: linear-gradient(180deg, #4a4a52 0%, #2a2a32 100%);
  color: #cad3da;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  font: 700 10px ui-monospace, monospace;
  letter-spacing: 0.16em;
  border: 1px solid #1a1a20;
  border-radius: 2px;
  box-shadow: 0 4px 0 #1a1a20, inset 0 1px 0 #6a6a72;
  transform: translateZ(calc(var(--i) * 28px));
}
.scd-iso__led {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3eff7f;
  box-shadow: 0 0 6px #3eff7f, inset 0 0 1px rgba(255,255,255,0.6);
}
<div class="scd-iso">
  <div class="scd-iso__c" style="--i:0"><span class="scd-iso__led"></span>WEB-01</div>
  <div class="scd-iso__c" style="--i:1"><span class="scd-iso__led"></span>API-02</div>
  <div class="scd-iso__c" style="--i:2"><span class="scd-iso__led"></span>DB-03</div>
  <div class="scd-iso__c" style="--i:3"><span class="scd-iso__led"></span>CACHE-04</div>
</div>
17 / 22
3D Flip Stack
Pure CSS
P
9
A
2
R
A
I
M
S
B
Solari split-flap board — black flap cards with amber characters that rotate to reveal the next destination on hover.
Try it 
.scd-flip {
  position: relative; width: 240px; height: 130px; margin: 0 auto;
  display: flex; gap: 4px; perspective: 800px;
  background: #1a1a1a; padding: 8px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #2a2a2a;
}
.scd-flip__c {
  flex: 1; position: relative;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3,1,.3,1);
  transition-delay: calc(var(--i) * 0.08s);
}
.scd-flip__f, .scd-flip__b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 3px;
  font: 900 36px/1 ui-monospace, monospace;
  backface-visibility: hidden;
  background: #171717;
  color: #ffb000;
  border: 1px solid #2a2a2a;
  box-shadow: inset 0 -1px 0 #000, inset 0 1px 0 #2a2a2a;
}
.scd-flip__b { transform: rotateY(180deg); }
.scd-flip__f::after, .scd-flip__b::after {
  content: '';
  position: absolute; left: 0; right: 0;
  top: 50%; height: 1px;
  background: #000;
}
.scd-flip:hover .scd-flip__c { transform: rotateY(180deg); }
<div class="scd-flip">
  <div class="scd-flip__c" style="--i:0"><div class="scd-flip__f">P</div><div class="scd-flip__b">9</div></div>
  <div class="scd-flip__c" style="--i:1"><div class="scd-flip__f">A</div><div class="scd-flip__b">2</div></div>
  <div class="scd-flip__c" style="--i:2"><div class="scd-flip__f">R</div><div class="scd-flip__b">A</div></div>
  <div class="scd-flip__c" style="--i:3"><div class="scd-flip__f">I</div><div class="scd-flip__b">M</div></div>
  <div class="scd-flip__c" style="--i:4"><div class="scd-flip__f">S</div><div class="scd-flip__b">B</div></div>
</div>
18 / 22
Spiral Tower
Pure CSS
A
T
G
C
A
A DNA helix tower — cobalt nucleotide tiles continuously orbit a central axis. Each tile sits at a different height + rotation phase, so the strand reads as a slowly spinning helix.
Try it 
.scd-spir {
  position: relative; width: 200px; height: 220px; margin: 0 auto;
  perspective: 700px;
  display: flex; align-items: center; justify-content: center;
}
.scd-spir__inner, .scd-spir {
  transform-style: preserve-3d;
}
.scd-spir::before {
  content: '';
  position: absolute; left: 50%; top: 14px; bottom: 14px;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent 0%, #3fd5a8 20%, #3fd5a8 80%, transparent 100%);
  opacity: 0.45;
}
.scd-spir__c {
  position: absolute; left: 50%; top: 50%;
  width: 70px; height: 38px; margin: -19px 0 0 -35px;
  background: linear-gradient(135deg, #0066cc 0%, #003d7a 100%);
  color: #3fd5a8;
  display: grid; place-items: center;
  font: 900 18px/1 ui-monospace, monospace;
  border-radius: 4px;
  border-left: 3px solid #3fd5a8;
  box-shadow: 0 4px 12px -4px rgba(0,102,204,0.5), inset 1px 0 0 rgba(255,255,255,0.12);
  backface-visibility: visible;
  transform-style: preserve-3d;
  animation: scd-spir-orbit 6s linear infinite;
  animation-delay: calc(var(--i) * -1.2s);
}
@keyframes scd-spir-orbit {
  0%   { transform: translateY(70px)  rotateY(0deg)   translateZ(48px); }
  25%  { transform: translateY(35px)  rotateY(90deg)  translateZ(48px); }
  50%  { transform: translateY(0)     rotateY(180deg) translateZ(48px); }
  75%  { transform: translateY(-35px) rotateY(270deg) translateZ(48px); }
  100% { transform: translateY(-70px) rotateY(360deg) translateZ(48px); }
}
@media (prefers-reduced-motion: reduce) {
  .scd-spir__c { animation: none; transform: translateY(calc(var(--i) * -22px - 44px)) rotateY(calc(var(--i) * 36deg)) translateZ(48px); }
}
<div class="scd-spir">
  <div class="scd-spir__c" style="--i:0">A</div>
  <div class="scd-spir__c" style="--i:1">T</div>
  <div class="scd-spir__c" style="--i:2">G</div>
  <div class="scd-spir__c" style="--i:3">C</div>
  <div class="scd-spir__c" style="--i:4">A</div>
</div>
19 / 22
Tilt on Hover
Pure CSS
VOL · I
VOL · II
VOL · III
A hardback book stack — oxblood leather covers with gilt-gold spine bands and cream page edges. Tilts subtly in 3D on hover.
Try it 
.scd-pers {
  position: relative; width: 200px; height: 150px; margin: 0 auto;
  perspective: 1000px; transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.3,1,.3,1);
}
.scd-pers__c {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, transparent 78%, #f5e8c4 78%, #f5e8c4 100%),
    linear-gradient(135deg, #5a1a1a 0%, #3a0a0a 100%);
  color: #c9a233;
  border-radius: 2px 6px 6px 2px;
  display: flex; align-items: center; padding: 0 18px;
  font: 700 14px ui-serif, Georgia;
  box-shadow: 0 8px 22px -8px rgba(90,26,26,0.55), inset 0 0 0 1px rgba(201,162,51,0.2);
  transform: translateZ(calc(var(--i) * -30px)) translateY(calc(var(--i) * -8px));
  transition: transform .5s cubic-bezier(.3,1,.3,1);
  z-index: calc(10 - var(--i));
}
.scd-pers__title {
  border-top: 1px solid #c9a233;
  border-bottom: 1px solid #c9a233;
  padding: 6px 0;
  letter-spacing: 0.16em;
}
.scd-pers:hover { transform: rotateX(-12deg) rotateY(8deg); }
<div class="scd-pers">
  <div class="scd-pers__c" style="--i:0"><span class="scd-pers__title">VOL · I</span></div>
  <div class="scd-pers__c" style="--i:1"><span class="scd-pers__title">VOL · II</span></div>
  <div class="scd-pers__c" style="--i:2"><span class="scd-pers__title">VOL · III</span></div>
</div>
20 / 22
Notification Pile
Pure CSS
Alarm7:00 AM
Activity+12 mins
Calendarin 5 min
Mail2 new
Apple-Watch–style notification feed — alerts slide in from the top one after another, fading and shrinking as they settle into the pile beneath. The cycle loops so new alerts keep arriving.
Try it 
.scd-not {
  position: relative; width: 220px; height: 200px; margin: 0 auto;
  background: linear-gradient(180deg, #000 0%, #1c1c1e 100%);
  border-radius: 28px;
  padding: 14px 0;
  border: 2px solid #2a2a2c;
  overflow: hidden;
}
.scd-not__c {
  position: absolute; left: 50%; top: 12px;
  width: 196px; margin-left: -98px;
  background: rgba(58, 58, 64, 0.85);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: #f1f5f9;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 10px 14px;
  display: flex; gap: 10px; align-items: center;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.5);
  animation: scd-not-arrive 5s cubic-bezier(.3,1,.3,1) infinite;
  animation-delay: calc(var(--i) * 1.25s);
  opacity: 0;
}
@keyframes scd-not-arrive {
  0%   { transform: translateY(-60px) scale(1);    opacity: 0; }
  10%  { transform: translateY(0)     scale(1);    opacity: 1; }
  35%  { transform: translateY(40px)  scale(0.96); opacity: 0.85; }
  60%  { transform: translateY(76px)  scale(0.92); opacity: 0.6; }
  85%  { transform: translateY(108px) scale(0.88); opacity: 0.3; }
  100% { transform: translateY(140px) scale(0.84); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scd-not__c {
    animation: none; opacity: calc(1 - var(--i) * 0.2);
    transform: translateY(calc(var(--i) * 36px)) scale(calc(1 - var(--i) * 0.04));
  }
}
.scd-not__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--a);
  box-shadow: 0 0 4px var(--a);
  flex-shrink: 0;
}
.scd-not__c b    { flex: 1; font: 700 12px/1 system-ui; }
.scd-not__c .scd-not__t { font: 11px/1 ui-monospace, monospace; opacity: 0.65; flex-shrink: 0; }
<div class="scd-not">
  <div class="scd-not__c" style="--i:0; --a:#ff3b30"><span class="scd-not__dot"></span><b>Alarm</b><span class="scd-not__t">7:00 AM</span></div>
  <div class="scd-not__c" style="--i:1; --a:#34c759"><span class="scd-not__dot"></span><b>Activity</b><span class="scd-not__t">+12 mins</span></div>
  <div class="scd-not__c" style="--i:2; --a:#0a84ff"><span class="scd-not__dot"></span><b>Calendar</b><span class="scd-not__t">in 5 min</span></div>
  <div class="scd-not__c" style="--i:3; --a:#ffd60a"><span class="scd-not__dot"></span><b>Mail</b><span class="scd-not__t">2 new</span></div>
</div>
21 / 22
Receipt Roll
Pure CSS
PAID TICKET · 4218 Latte · $4.50 Croissant · $3.25
TICKET · 4219 Espresso · $3.00
TICKET · 4220 Mocha · $5.25
A pawn-shop ticket roll — newsprint cream paper torn at perforated edges with a wash-red "PAID" stamp on the lead ticket.
Try it 
.scd-rcpt {
  width: 192px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
  font: 11px/1.5 ui-monospace, monospace;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.scd-rcpt__c {
  background: #f4ecd8; color: #1a1a1a;
  padding: 12px 18px;
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
  border-bottom: 1.5px dashed #8a7d5a;
}
.scd-rcpt__stamp {
  position: absolute; top: 6px; right: 8px;
  font: 900 16px ui-serif, Georgia;
  color: #aa2a2a;
  border: 2px solid #aa2a2a;
  padding: 2px 8px;
  transform: rotate(-12deg);
  letter-spacing: 0.12em;
  opacity: 0.75;
}
.scd-rcpt__c::before, .scd-rcpt__c::after {
  content: ''; position: absolute; bottom: -7px;
  width: 14px; height: 14px;
  background: #17171f;
  border-radius: 50%;
}
.scd-rcpt__c::before { left: -7px; }
.scd-rcpt__c::after  { right: -7px; }
.scd-rcpt__c:last-child { border-bottom: none; }
.scd-rcpt__c:last-child::before, .scd-rcpt__c:last-child::after { display: none; }
.scd-rcpt__c b { font: 800 11px/1.2 ui-monospace; letter-spacing: 0.12em; }
<div class="scd-rcpt">
  <div class="scd-rcpt__c">
    <span class="scd-rcpt__stamp">PAID</span>
    <b>TICKET · 4218</b>
    <span>Latte · $4.50</span>
    <span>Croissant · $3.25</span>
  </div>
  <div class="scd-rcpt__c">
    <b>TICKET · 4219</b>
    <span>Espresso · $3.00</span>
  </div>
  <div class="scd-rcpt__c">
    <b>TICKET · 4220</b>
    <span>Mocha · $5.25</span>
  </div>
</div>
22 / 22
Scratch Cards
Pure CSS
$50
$100
$25
Lottery foil scratch cards — hot-pink envelopes covered with holographic silver foil that wipes clear on hover, revealing the neon prize amount.
Try it 
.scd-scr {
  position: relative; width: 240px; height: 150px; margin: 0 auto;
  display: flex; justify-content: center; align-items: center;
}
.scd-scr__c {
  position: relative;
  width: 84px; height: 116px; margin: 0 -8px;
  background: #e0387b;
  border: 2px solid #1a0033;
  border-radius: 6px;
  transform: rotate(var(--r));
  display: grid; place-items: center;
  box-shadow: 0 6px 14px -4px rgba(224,56,123,0.6);
  overflow: hidden;
  cursor: pointer;
}
.scd-scr__p {
  font: 900 24px/1 ui-monospace, monospace;
  color: #3eff7f;
  text-shadow: 0 0 8px rgba(62,255,127,0.4);
  letter-spacing: 0.06em;
}
.scd-scr__f {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(135deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%),
    linear-gradient(135deg, #cfd8dc 0%, #90a4ae 50%, #cfd8dc 100%);
  transition: opacity .4s;
}
.scd-scr__f::after {
  content: 'SCRATCH';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font: 900 11px ui-monospace, monospace;
  color: rgba(26,0,51,0.5); letter-spacing: 0.16em;
}
.scd-scr__c:hover .scd-scr__f { opacity: 0; }
<div class="scd-scr">
  <div class="scd-scr__c" style="--r:-8deg"><span class="scd-scr__p">$50</span><span class="scd-scr__f"></span></div>
  <div class="scd-scr__c" style="--r:0deg"><span class="scd-scr__p">$100</span><span class="scd-scr__f"></span></div>
  <div class="scd-scr__c" style="--r:8deg"><span class="scd-scr__p">$25</span><span class="scd-scr__f"></span></div>
</div>

Build your own

Tweak the exact look in our visual generators — no signup, instant copy-paste.

Generator
CSS Box Shadow Generator
Stack 2–3 layered shadows for that depth-of-deck feel.
Generator
CSS Transform Generator
Translate, rotate, and scale 3D card flips and spirals.

Related collections

22 CSS Button Group Designs preview

22 CSS Button Group Designs

22

22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.

button group css button group segmented control Responsive
31 CSS Button Designs preview

31 CSS Button Designs

31

31 hand-coded CSS buttons styled as real-world materials — brushed brass, holographic foil, vinyl record, velvet ribbon, frosted ice, brutalist concrete and more.

buttons hover animation Responsive
20 CSS Cards with Animations preview

20 CSS Cards with Animations

20

20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.

cards components animation Responsive