Playground · 22 demos
CSS Stacked Cards Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Stacked Cards collection for the gallery view with code panels.
01 CSS + JS
Classic Deck
Brutalist memo deck — riso-red index cards on cream stock with chunky ink labels. Click anywhere to cycle the front card to the back.
Open
02 CSS + JS
Fan Spread
Three tarot cards angled like a reading — aged parchment with midnight-blue backs and gold-foil arcana glyphs. Click to cycle.
Open
03 CSS + JS
Tilted Polaroids
A pile of 35mm filmstrip negatives — sepia frames with sprocket holes and Kodachrome amber tones. Click to send the top frame to the bottom.
Open
04 CSS + JS
Staircase Bricks
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.
Open
05 CSS + JS
Perspective Deck
Holographic trading cards with iridescent cyan→magenta sheen and pearl borders — click to send the front card receding into the back.
Open
06 Pure CSS
Hover Spread
A casino chip rack on green felt — chips stacked tight at center; hover spreads them into a fan with denomination markings.
Open
07 Pure CSS
Cascade Lift
Manila folder index — kraft-paper folders with green tab labels stacked tight; hover lifts them into a staggered cascade.
Open
08 Pure CSS
Peel Back
A wax-sealed envelope — cream cover with serif copperplate; hover peels the flap to reveal a scarlet wax seal beneath.
Open
09 Pure CSS
Accordion Spread
Spice-market labels — saffron, paprika, turmeric, cardamom strips compressed flat; hover expands the active strip with its name in full.
Open
10 Pure CSS
Shuffle Reveal
Three vinyl record sleeves — red, cobalt, and warm-yellow LP covers; hover slides the front sleeve out at an angle to expose the next.
Open
11 Pure CSS
Tab Stack
Library catalog cards — cream cardstock with a red Dewey stamp and olive index lines. Click any card to bring it to the front.
Open
12 Pure CSS
Photos Pinch
Pantone color-of-the-year swatches — Mustard Yellow, Tangerine, Ultra Violet, Classic Blue. Click any swatch to pull it forward.
Open
13 CSS + JS
Swipe Stack
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.
Open
14 Pure CSS
Accordion Card
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.
Open
15 Pure CSS
Timeline Stack
Architectural blueprint scroll — chalk-white milestone cards on cyanotype navy with grid-paper backdrop and dimensional dots.
Open
16 Pure CSS
Isometric Tower
Server rack tower — graphite metal slabs with green LED indicators stacked in isometric projection.
Open
17 Pure CSS
3D Flip Stack
Solari split-flap board — black flap cards with amber characters that rotate to reveal the next destination on hover.
Open
18 Pure CSS
Spiral Tower
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.
Open
19 Pure CSS
Tilt on Hover
A hardback book stack — oxblood leather covers with gilt-gold spine bands and cream page edges. Tilts subtly in 3D on hover.
Open
20 Pure CSS
Notification Pile
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.
Open
21 Pure CSS
Receipt Roll
A pawn-shop ticket roll — newsprint cream paper torn at perforated edges with a wash-red "PAID" stamp on the lead ticket.
Open
22 Pure CSS
Scratch Cards
Lottery foil scratch cards — hot-pink envelopes covered with holographic silver foil that wipes clear on hover, revealing the neon prize amount.
Open