28 CSS Stacked Card Designs 03 / 28
Pure CSS Stacked Card Testimonial Slider
A compact social-proof widget built entirely with hidden radio inputs and the :checked selector — zero JavaScript and no heavy slider libraries.
Best forlanding-page testimonial sections where space is at a premium.
The code
<div class="scd-test">
<div class="scd-test__stage">
<input type="radio" name="scd-test-t" id="scd-test-t1" class="scd-test__radio scd-test__radio--r1" checked>
<input type="radio" name="scd-test-t" id="scd-test-t2" class="scd-test__radio scd-test__radio--r2">
<input type="radio" name="scd-test-t" id="scd-test-t3" class="scd-test__radio scd-test__radio--r3">
<div class="scd-test__slider">
<div class="scd-test__quote scd-test__quote--q1"><p>“This completely changed how our team ships. We cut launch time in half.”</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#ff9a3c,#ff5e62)"></span><div><h4>Maya Chen</h4><span>Head of Product, Loop</span></div></div></div>
<div class="scd-test__quote scd-test__quote--q2"><p>“Beautiful, fast, and genuinely a joy to use every single day.”</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#43cea2,#185a9d)"></span><div><h4>Theo Marsh</h4><span>Founder, Northbeam</span></div></div></div>
<div class="scd-test__quote scd-test__quote--q3"><p>“The support alone is worth it. Best decision we made this year.”</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#c471f5,#7f53ac)"></span><div><h4>Lena Ortiz</h4><span>CTO, Brightside</span></div></div></div>
</div>
<div class="scd-test__dots">
<label for="scd-test-t1"></label><label for="scd-test-t2"></label><label for="scd-test-t3"></label>
</div>
</div>
</div> <div class="scd-test">
<div class="scd-test__stage">
<input type="radio" name="scd-test-t" id="scd-test-t1" class="scd-test__radio scd-test__radio--r1" checked>
<input type="radio" name="scd-test-t" id="scd-test-t2" class="scd-test__radio scd-test__radio--r2">
<input type="radio" name="scd-test-t" id="scd-test-t3" class="scd-test__radio scd-test__radio--r3">
<div class="scd-test__slider">
<div class="scd-test__quote scd-test__quote--q1"><p>“This completely changed how our team ships. We cut launch time in half.”</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#ff9a3c,#ff5e62)"></span><div><h4>Maya Chen</h4><span>Head of Product, Loop</span></div></div></div>
<div class="scd-test__quote scd-test__quote--q2"><p>“Beautiful, fast, and genuinely a joy to use every single day.”</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#43cea2,#185a9d)"></span><div><h4>Theo Marsh</h4><span>Founder, Northbeam</span></div></div></div>
<div class="scd-test__quote scd-test__quote--q3"><p>“The support alone is worth it. Best decision we made this year.”</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#c471f5,#7f53ac)"></span><div><h4>Lena Ortiz</h4><span>CTO, Brightside</span></div></div></div>
</div>
<div class="scd-test__dots">
<label for="scd-test-t1"></label><label for="scd-test-t2"></label><label for="scd-test-t3"></label>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,400&family=Geist:wght@400;500;600&display=swap');
.scd-test, .scd-test *, .scd-test *::before, .scd-test *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-test {
min-height: 460px;
display: grid;
place-items: center;
background: linear-gradient(160deg,#fef6ee,#f4e4d4);
font-family: 'Geist', sans-serif;
}
.scd-test__stage { position: relative; }
.scd-test__radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.scd-test__slider { position: relative; width: 330px; height: 300px; }
.scd-test__quote {
position: absolute; inset: 0;
background: #fffdfa;
border-radius: 22px;
padding: 30px;
box-shadow: 0 18px 40px rgba(120,80,50,.18);
border: 1px solid #f0e2d2;
transition: transform .6s cubic-bezier(.3,.9,.3,1), opacity .6s;
display: flex; flex-direction: column; justify-content: space-between;
transform: translateY(28px) scale(.88);
opacity: 0;
z-index: 1;
}
.scd-test__quote p {
font-family: 'Newsreader', serif;
font-style: italic;
font-size: 1.25rem;
line-height: 1.45;
color: #3a2e24;
}
.scd-test__who { display: flex; align-items: center; gap: 12px; }
.scd-test__av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: block; }
.scd-test__who h4 { font-size: .9rem; font-weight: 600; color: #2a201a; }
.scd-test__who span { font-size: .78rem; color: #9b7d5f; }
.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q1,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q2,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q3 { transform: translateY(0) scale(1); opacity: 1; z-index: 4; }
.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q2,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q3,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q1 { transform: translateY(14px) scale(.94); opacity: .55; z-index: 3; }
.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q3,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q1,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q2 { transform: translateY(28px) scale(.88); opacity: .3; z-index: 2; }
.scd-test__dots { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.scd-test__dots label {
width: 11px; height: 11px; border-radius: 50%;
background: #d8c3aa; cursor: pointer;
transition: background .3s, transform .3s;
}
.scd-test__dots label:hover { background: #c9a98a; }
.scd-test__radio--r1:checked ~ .scd-test__dots label[for="scd-test-t1"],
.scd-test__radio--r2:checked ~ .scd-test__dots label[for="scd-test-t2"],
.scd-test__radio--r3:checked ~ .scd-test__dots label[for="scd-test-t3"] { background: #b8553f; transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
.scd-test__quote,
.scd-test__dots label { transition: none !important; }
} @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,400&family=Geist:wght@400;500;600&display=swap');
.scd-test, .scd-test *, .scd-test *::before, .scd-test *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-test {
min-height: 460px;
display: grid;
place-items: center;
background: linear-gradient(160deg,#fef6ee,#f4e4d4);
font-family: 'Geist', sans-serif;
}
.scd-test__stage { position: relative; }
.scd-test__radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.scd-test__slider { position: relative; width: 330px; height: 300px; }
.scd-test__quote {
position: absolute; inset: 0;
background: #fffdfa;
border-radius: 22px;
padding: 30px;
box-shadow: 0 18px 40px rgba(120,80,50,.18);
border: 1px solid #f0e2d2;
transition: transform .6s cubic-bezier(.3,.9,.3,1), opacity .6s;
display: flex; flex-direction: column; justify-content: space-between;
transform: translateY(28px) scale(.88);
opacity: 0;
z-index: 1;
}
.scd-test__quote p {
font-family: 'Newsreader', serif;
font-style: italic;
font-size: 1.25rem;
line-height: 1.45;
color: #3a2e24;
}
.scd-test__who { display: flex; align-items: center; gap: 12px; }
.scd-test__av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: block; }
.scd-test__who h4 { font-size: .9rem; font-weight: 600; color: #2a201a; }
.scd-test__who span { font-size: .78rem; color: #9b7d5f; }
.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q1,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q2,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q3 { transform: translateY(0) scale(1); opacity: 1; z-index: 4; }
.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q2,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q3,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q1 { transform: translateY(14px) scale(.94); opacity: .55; z-index: 3; }
.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q3,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q1,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q2 { transform: translateY(28px) scale(.88); opacity: .3; z-index: 2; }
.scd-test__dots { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.scd-test__dots label {
width: 11px; height: 11px; border-radius: 50%;
background: #d8c3aa; cursor: pointer;
transition: background .3s, transform .3s;
}
.scd-test__dots label:hover { background: #c9a98a; }
.scd-test__radio--r1:checked ~ .scd-test__dots label[for="scd-test-t1"],
.scd-test__radio--r2:checked ~ .scd-test__dots label[for="scd-test-t2"],
.scd-test__radio--r3:checked ~ .scd-test__dots label[for="scd-test-t3"] { background: #b8553f; transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
.scd-test__quote,
.scd-test__dots label { transition: none !important; }
}