26 CSS Accordions — Vertical & Horizontal 24 / 26
Stacked Cards
Closed rows stack with a slight scale-down and translucent overlap; opened row pops to top.
The code
<details class="acc-stk" name="acc-stk" style="--i: 0" open> <summary>Top of pile</summary> <p>The first card sits flush. Behind it the others fan back in scale.</p> </details> <details class="acc-stk" name="acc-stk" style="--i: 1"> <summary>Second card</summary> <p>Slightly smaller and pulled up. Click to bring it to the front of the stack.</p> </details> <details class="acc-stk" name="acc-stk" style="--i: 2"> <summary>Third card</summary> <p>The deepest in the deck. Smaller still, but always reachable.</p> </details>
<details class="acc-stk" name="acc-stk" style="--i: 0" open>
<summary>Top of pile</summary>
<p>The first card sits flush. Behind it the others fan back in scale.</p>
</details>
<details class="acc-stk" name="acc-stk" style="--i: 1">
<summary>Second card</summary>
<p>Slightly smaller and pulled up. Click to bring it to the front of the stack.</p>
</details>
<details class="acc-stk" name="acc-stk" style="--i: 2">
<summary>Third card</summary>
<p>The deepest in the deck. Smaller still, but always reachable.</p>
</details>.acc-stk {
margin-top: -10px; margin-bottom: 0;
background: linear-gradient(135deg, #2a2438, #1a1a24);
border: 1px solid rgba(156,123,214,0.25);
border-radius: 12px;
transform: scale(calc(1 - var(--i) * 0.04)) translateY(calc(var(--i) * -2px));
transform-origin: center top;
transition: transform .3s, margin .3s, opacity .3s;
opacity: calc(1 - var(--i) * 0.18);
}
.acc-stk:first-of-type { margin-top: 0; }
.acc-stk summary {
cursor: pointer; list-style: none; padding: 13px 16px;
font: 700 13px/1 system-ui; color: #f0eeff;
}
.acc-stk summary::-webkit-details-marker { display: none; }
.acc-stk[open] {
transform: scale(1) translateY(0);
opacity: 1; margin-top: 8px; margin-bottom: 8px;
border-color: rgba(212,154,92,0.5);
box-shadow: 0 12px 30px -10px rgba(156,123,214,0.5);
}
.acc-stk:first-of-type[open] { margin-top: 0; }
.acc-stk p {
margin: 0; padding: 0 16px 14px;
font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
} .acc-stk {
margin-top: -10px; margin-bottom: 0;
background: linear-gradient(135deg, #2a2438, #1a1a24);
border: 1px solid rgba(156,123,214,0.25);
border-radius: 12px;
transform: scale(calc(1 - var(--i) * 0.04)) translateY(calc(var(--i) * -2px));
transform-origin: center top;
transition: transform .3s, margin .3s, opacity .3s;
opacity: calc(1 - var(--i) * 0.18);
}
.acc-stk:first-of-type { margin-top: 0; }
.acc-stk summary {
cursor: pointer; list-style: none; padding: 13px 16px;
font: 700 13px/1 system-ui; color: #f0eeff;
}
.acc-stk summary::-webkit-details-marker { display: none; }
.acc-stk[open] {
transform: scale(1) translateY(0);
opacity: 1; margin-top: 8px; margin-bottom: 8px;
border-color: rgba(212,154,92,0.5);
box-shadow: 0 12px 30px -10px rgba(156,123,214,0.5);
}
.acc-stk:first-of-type[open] { margin-top: 0; }
.acc-stk p {
margin: 0; padding: 0 16px 14px;
font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
}More from 26 CSS Accordions — Vertical & Horizontal
Numbered SpineCurtain SlideVinyl SpineCinema ReelAurora StripDiagonal SlantStepped StairCircular ArcMarquee HeaderCode CommentPaper FoldedEqualizer
View the full collection →