28 CSS Stacked Card Designs 27 / 28
Receipt Roll
Thermal-printer receipts with punched edges that unroll downward on hover, revealing itemized lines and totals.
Best fororder summaries, invoices, or pricing breakdowns.
The code
<div class="scd-receipt">
<div class="scd-receipt__stage">
<div class="scd-receipt__receipt scd-receipt__receipt--r3"><h3>★ THANKS ★</h3><div class="scd-receipt__line"><span>Loyalty pts</span><span>+45</span></div><div class="scd-receipt__line scd-receipt__line--total"><span>NEXT VISIT</span><span>10% OFF</span></div></div>
<div class="scd-receipt__receipt scd-receipt__receipt--r2"><h3>SUBTOTAL</h3><div class="scd-receipt__line"><span>Tax</span><span>$1.92</span></div><div class="scd-receipt__line"><span>Tip</span><span>$4.50</span></div><div class="scd-receipt__line scd-receipt__line--total"><span>TOTAL</span><span>$30.42</span></div></div>
<div class="scd-receipt__receipt scd-receipt__receipt--r1"><h3>CAFE NORD</h3><div class="scd-receipt__line"><span>Flat white</span><span>$4.50</span></div><div class="scd-receipt__line"><span>Croissant</span><span>$3.75</span></div><div class="scd-receipt__line"><span>Oat latte</span><span>$5.25</span></div><div class="scd-receipt__line"><span>Banana bread</span><span>$4.00</span></div></div>
</div>
</div> <div class="scd-receipt">
<div class="scd-receipt__stage">
<div class="scd-receipt__receipt scd-receipt__receipt--r3"><h3>★ THANKS ★</h3><div class="scd-receipt__line"><span>Loyalty pts</span><span>+45</span></div><div class="scd-receipt__line scd-receipt__line--total"><span>NEXT VISIT</span><span>10% OFF</span></div></div>
<div class="scd-receipt__receipt scd-receipt__receipt--r2"><h3>SUBTOTAL</h3><div class="scd-receipt__line"><span>Tax</span><span>$1.92</span></div><div class="scd-receipt__line"><span>Tip</span><span>$4.50</span></div><div class="scd-receipt__line scd-receipt__line--total"><span>TOTAL</span><span>$30.42</span></div></div>
<div class="scd-receipt__receipt scd-receipt__receipt--r1"><h3>CAFE NORD</h3><div class="scd-receipt__line"><span>Flat white</span><span>$4.50</span></div><div class="scd-receipt__line"><span>Croissant</span><span>$3.75</span></div><div class="scd-receipt__line"><span>Oat latte</span><span>$5.25</span></div><div class="scd-receipt__line"><span>Banana bread</span><span>$4.00</span></div></div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=VT323&family=Courier+Prime:wght@400;700&display=swap');
.scd-receipt, .scd-receipt *, .scd-receipt *::before, .scd-receipt *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-receipt {
min-height: 460px;
display: grid;
place-items: center;
background: #2d2a26;
font-family: 'Courier Prime', monospace;
}
.scd-receipt__stage { position: relative; width: 240px; height: 380px; }
.scd-receipt__receipt {
position: absolute; left: 0; right: 0;
background: #fdfcf7;
padding: 18px 20px;
color: #222;
box-shadow: 0 8px 20px rgba(0,0,0,.4);
transition: transform .55s cubic-bezier(.3,.9,.3,1);
transform-origin: top center;
cursor: pointer;
-webkit-mask:
radial-gradient(circle 5px at 5px 50%,transparent 98%,#000) left/100% 12px repeat-y,
radial-gradient(circle 5px at calc(100% - 5px) 50%,transparent 98%,#000) right/100% 12px repeat-y;
mask:
radial-gradient(circle 5px at 5px 50%,transparent 98%,#000) left/100% 12px repeat-y,
radial-gradient(circle 5px at calc(100% - 5px) 50%,transparent 98%,#000) right/100% 12px repeat-y;
-webkit-mask-composite: source-over;
mask-composite: add;
}
.scd-receipt__receipt h3 {
font-family: 'VT323', monospace;
font-size: 1.6rem; text-align: center; letter-spacing: .05em;
}
.scd-receipt__line {
display: flex; justify-content: space-between;
font-size: .85rem; padding: 3px 0;
border-bottom: 1px dashed #bbb;
}
.scd-receipt__line--total {
font-weight: 700;
border-top: 2px solid #222;
margin-top: 6px;
padding-top: 6px;
}
.scd-receipt__receipt--r1 { top: 0; z-index: 3; }
.scd-receipt__receipt--r2 { top: 30px; z-index: 2; transform: scaleY(.5) translateY(-20px); filter: brightness(.96); }
.scd-receipt__receipt--r3 { top: 60px; z-index: 1; transform: scaleY(.25) translateY(-30px); filter: brightness(.92); }
.scd-receipt__stage:hover .scd-receipt__receipt--r2 { transform: scaleY(1) translateY(160px); }
.scd-receipt__stage:hover .scd-receipt__receipt--r3 { transform: scaleY(1) translateY(330px); }
@media (prefers-reduced-motion: reduce) {
.scd-receipt__receipt { transition: none !important; }
} @import url('https://fonts.googleapis.com/css2?family=VT323&family=Courier+Prime:wght@400;700&display=swap');
.scd-receipt, .scd-receipt *, .scd-receipt *::before, .scd-receipt *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-receipt {
min-height: 460px;
display: grid;
place-items: center;
background: #2d2a26;
font-family: 'Courier Prime', monospace;
}
.scd-receipt__stage { position: relative; width: 240px; height: 380px; }
.scd-receipt__receipt {
position: absolute; left: 0; right: 0;
background: #fdfcf7;
padding: 18px 20px;
color: #222;
box-shadow: 0 8px 20px rgba(0,0,0,.4);
transition: transform .55s cubic-bezier(.3,.9,.3,1);
transform-origin: top center;
cursor: pointer;
-webkit-mask:
radial-gradient(circle 5px at 5px 50%,transparent 98%,#000) left/100% 12px repeat-y,
radial-gradient(circle 5px at calc(100% - 5px) 50%,transparent 98%,#000) right/100% 12px repeat-y;
mask:
radial-gradient(circle 5px at 5px 50%,transparent 98%,#000) left/100% 12px repeat-y,
radial-gradient(circle 5px at calc(100% - 5px) 50%,transparent 98%,#000) right/100% 12px repeat-y;
-webkit-mask-composite: source-over;
mask-composite: add;
}
.scd-receipt__receipt h3 {
font-family: 'VT323', monospace;
font-size: 1.6rem; text-align: center; letter-spacing: .05em;
}
.scd-receipt__line {
display: flex; justify-content: space-between;
font-size: .85rem; padding: 3px 0;
border-bottom: 1px dashed #bbb;
}
.scd-receipt__line--total {
font-weight: 700;
border-top: 2px solid #222;
margin-top: 6px;
padding-top: 6px;
}
.scd-receipt__receipt--r1 { top: 0; z-index: 3; }
.scd-receipt__receipt--r2 { top: 30px; z-index: 2; transform: scaleY(.5) translateY(-20px); filter: brightness(.96); }
.scd-receipt__receipt--r3 { top: 60px; z-index: 1; transform: scaleY(.25) translateY(-30px); filter: brightness(.92); }
.scd-receipt__stage:hover .scd-receipt__receipt--r2 { transform: scaleY(1) translateY(160px); }
.scd-receipt__stage:hover .scd-receipt__receipt--r3 { transform: scaleY(1) translateY(330px); }
@media (prefers-reduced-motion: reduce) {
.scd-receipt__receipt { transition: none !important; }
}More from 28 CSS Stacked Card Designs
Swipeable / Click-to-Front Stacked CardsShuffle RevealSwipe StackAccordion Card3D Flip StackTilt on HoverScratch CardsCSS Stacked Cards Hover RevealPure CSS Stacked Card Testimonial Slider3D Overlapping Stacked Cards (Isometric View)Minimalist Bento Grid Stacked CardsClassic Deck
View the full collection →