28 CSS Stacked Card Designs 06 / 28

Minimalist Bento Grid Stacked Cards

A dark, dashboard-style bento grid where one tile embeds a stacked mini-card component to conserve space — channel breakdowns sit collapsed inside a single cell and fan open on hover, while neighboring tiles show stats, a sparkline, and glow accents.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<div class="scd-bento">
  <div class="scd-bento__stage">
    <div class="scd-bento__tile scd-bento__tile--tall scd-bento__tile--channels">
      <span class="scd-bento__lbl">Channels</span>
      <div class="scd-bento__substack">
        <div class="scd-bento__mini scd-bento__mini--m1"><span class="scd-bento__lbl">Organic</span><b>62%</b></div>
        <div class="scd-bento__mini scd-bento__mini--m2"><span class="scd-bento__lbl">Paid</span><b>24%</b></div>
        <div class="scd-bento__mini scd-bento__mini--m3"><span class="scd-bento__lbl">Referral</span><b>14%</b></div>
      </div>
    </div>
    <div class="scd-bento__tile scd-bento__tile--wide"><div class="scd-bento__glow" style="background:#34d399"></div><span class="scd-bento__lbl">Revenue</span><div class="scd-bento__val">$48.2k <small>+12%</small></div><div class="scd-bento__spark"><span style="height:40%"></span><span style="height:55%"></span><span style="height:45%"></span><span style="height:70%"></span><span style="height:60%"></span><span style="height:85%"></span><span style="height:100%"></span></div></div>
    <div class="scd-bento__tile"><span class="scd-bento__lbl">Users</span><div class="scd-bento__val">9.1k</div></div>
    <div class="scd-bento__tile"><span class="scd-bento__lbl">Churn</span><div class="scd-bento__val" style="color:#fca5a5">1.8%</div></div>
    <div class="scd-bento__tile"><div class="scd-bento__glow" style="background:#818cf8"></div><span class="scd-bento__lbl">NPS</span><div class="scd-bento__val">72</div></div>
  </div>
</div>

<div class="scd-bento">
  <div class="scd-bento__stage">
    <div class="scd-bento__tile scd-bento__tile--tall scd-bento__tile--channels">
      <span class="scd-bento__lbl">Channels</span>
      <div class="scd-bento__substack">
        <div class="scd-bento__mini scd-bento__mini--m1"><span class="scd-bento__lbl">Organic</span><b>62%</b></div>
        <div class="scd-bento__mini scd-bento__mini--m2"><span class="scd-bento__lbl">Paid</span><b>24%</b></div>
        <div class="scd-bento__mini scd-bento__mini--m3"><span class="scd-bento__lbl">Referral</span><b>14%</b></div>
      </div>
    </div>
    <div class="scd-bento__tile scd-bento__tile--wide"><div class="scd-bento__glow" style="background:#34d399"></div><span class="scd-bento__lbl">Revenue</span><div class="scd-bento__val">$48.2k <small>+12%</small></div><div class="scd-bento__spark"><span style="height:40%"></span><span style="height:55%"></span><span style="height:45%"></span><span style="height:70%"></span><span style="height:60%"></span><span style="height:85%"></span><span style="height:100%"></span></div></div>
    <div class="scd-bento__tile"><span class="scd-bento__lbl">Users</span><div class="scd-bento__val">9.1k</div></div>
    <div class="scd-bento__tile"><span class="scd-bento__lbl">Churn</span><div class="scd-bento__val" style="color:#fca5a5">1.8%</div></div>
    <div class="scd-bento__tile"><div class="scd-bento__glow" style="background:#818cf8"></div><span class="scd-bento__lbl">NPS</span><div class="scd-bento__val">72</div></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

.scd-bento, .scd-bento *, .scd-bento *::before, .scd-bento *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-bento {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0e0f13;
  font-family: 'Geist', sans-serif;
  padding: 20px;
}
.scd-bento__stage {
  display: grid;
  grid-template-columns: repeat(3, 118px);
  grid-template-rows: repeat(3, 118px);
  gap: 12px;
}
.scd-bento__tile {
  background: #191b22;
  border: 1px solid #262934;
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
}
.scd-bento__tile:hover { border-color: #3a4050; }
.scd-bento__lbl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
.scd-bento__val { font-size: 1.6rem; font-weight: 700; color: #f3f4f6; margin-top: 4px; }
.scd-bento__val small { font-size: .8rem; color: #34d399; }
.scd-bento__tile--wide { grid-column: span 2; }
.scd-bento__tile--tall { grid-row: span 2; }
.scd-bento__tile--channels { overflow: visible; z-index: 5; }
.scd-bento__tile--channels:hover { z-index: 20; }

.scd-bento__substack {
  position: absolute;
  bottom: 14px; left: 16px; right: 16px;
  height: 54px;
}
.scd-bento__mini {
  position: absolute;
  left: 0; right: 0;
  height: 54px;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: .72rem;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.55);
  transition: transform .45s cubic-bezier(.3,.9,.3,1);
}
.scd-bento__mini .scd-bento__lbl { color: rgba(255,255,255,.85); }
.scd-bento__mini b { font-size: .95rem; display: block; margin-top: 2px; }
.scd-bento__mini--m1 { background: linear-gradient(135deg,#6366f1,#818cf8); z-index: 3; transform: translateY(0); }
.scd-bento__mini--m2 { background: linear-gradient(135deg,#ec4899,#f472b6); z-index: 2; transform: translateY(8px) scale(.95); }
.scd-bento__mini--m3 { background: linear-gradient(135deg,#14b8a6,#2dd4bf); z-index: 1; transform: translateY(16px) scale(.9); }

.scd-bento__tile--channels:hover .scd-bento__mini--m1 { transform: translateY(-120px); }
.scd-bento__tile--channels:hover .scd-bento__mini--m2 { transform: translateY(-58px) scale(1); }
.scd-bento__tile--channels:hover .scd-bento__mini--m3 { transform: translateY(4px) scale(1); }

.scd-bento__spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
  margin-top: 10px;
}
.scd-bento__spark span { flex: 1; background: linear-gradient(#34d399,#059669); border-radius: 3px; }
.scd-bento__glow {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .5;
  top: -20px; right: -20px;
}

@media (prefers-reduced-motion: reduce) {
  .scd-bento__tile,
  .scd-bento__mini { transition: none !important; }
}

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

.scd-bento, .scd-bento *, .scd-bento *::before, .scd-bento *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-bento {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0e0f13;
  font-family: 'Geist', sans-serif;
  padding: 20px;
}
.scd-bento__stage {
  display: grid;
  grid-template-columns: repeat(3, 118px);
  grid-template-rows: repeat(3, 118px);
  gap: 12px;
}
.scd-bento__tile {
  background: #191b22;
  border: 1px solid #262934;
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
}
.scd-bento__tile:hover { border-color: #3a4050; }
.scd-bento__lbl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
.scd-bento__val { font-size: 1.6rem; font-weight: 700; color: #f3f4f6; margin-top: 4px; }
.scd-bento__val small { font-size: .8rem; color: #34d399; }
.scd-bento__tile--wide { grid-column: span 2; }
.scd-bento__tile--tall { grid-row: span 2; }
.scd-bento__tile--channels { overflow: visible; z-index: 5; }
.scd-bento__tile--channels:hover { z-index: 20; }

.scd-bento__substack {
  position: absolute;
  bottom: 14px; left: 16px; right: 16px;
  height: 54px;
}
.scd-bento__mini {
  position: absolute;
  left: 0; right: 0;
  height: 54px;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: .72rem;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.55);
  transition: transform .45s cubic-bezier(.3,.9,.3,1);
}
.scd-bento__mini .scd-bento__lbl { color: rgba(255,255,255,.85); }
.scd-bento__mini b { font-size: .95rem; display: block; margin-top: 2px; }
.scd-bento__mini--m1 { background: linear-gradient(135deg,#6366f1,#818cf8); z-index: 3; transform: translateY(0); }
.scd-bento__mini--m2 { background: linear-gradient(135deg,#ec4899,#f472b6); z-index: 2; transform: translateY(8px) scale(.95); }
.scd-bento__mini--m3 { background: linear-gradient(135deg,#14b8a6,#2dd4bf); z-index: 1; transform: translateY(16px) scale(.9); }

.scd-bento__tile--channels:hover .scd-bento__mini--m1 { transform: translateY(-120px); }
.scd-bento__tile--channels:hover .scd-bento__mini--m2 { transform: translateY(-58px) scale(1); }
.scd-bento__tile--channels:hover .scd-bento__mini--m3 { transform: translateY(4px) scale(1); }

.scd-bento__spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
  margin-top: 10px;
}
.scd-bento__spark span { flex: 1; background: linear-gradient(#34d399,#059669); border-radius: 3px; }
.scd-bento__glow {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .5;
  top: -20px; right: -20px;
}

@media (prefers-reduced-motion: reduce) {
  .scd-bento__tile,
  .scd-bento__mini { transition: none !important; }
}

More from 28 CSS Stacked Card Designs

Hover Spread Cascade Lift Peel Back Accordion Spread Tab Stack Photos Pinch Timeline Stack Isometric Tower Spiral Tower Notification Pile Receipt Roll Scroll-Activated Stacked Cards (Sticky Stack)

View the full collection →