26 CSS Accordions — Vertical & Horizontal

Card Lift

Floating cards that lift with a soft shadow when expanded — accent color shifts subtly.

Pure CSS MIT licensed

Card Lift the 8th of 26 designs in the 26 CSS Accordions — Vertical & Horizontal collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<details class="acc-lift" name="acc-lift" open>
  <summary>Mountain View</summary>
  <p>Wake to clear sightlines and warm light. The view is the room.</p>
</details>
<details class="acc-lift" name="acc-lift">
  <summary>Garden Suite</summary>
  <p>A private terrace facing south, framed by old growth and stone.</p>
</details>
<details class="acc-lift" name="acc-lift">
  <summary>Loft Studio</summary>
  <p>Open plan with full-height windows and a quiet corner for work.</p>
</details>

.acc-lift {
  background: #1a1a24; border: 1px solid rgba(240,238,255,0.05);
  border-radius: 12px; margin-bottom: 8px;
  transition: transform .3s cubic-bezier(.3,1.4,.5,1), box-shadow .3s, border-color .3s;
}
.acc-lift summary {
  cursor: pointer; list-style: none; padding: 14px 16px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.75);
}
.acc-lift summary::-webkit-details-marker { display: none; }
.acc-lift[open] {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px rgba(156,123,214,0.4);
  border-color: rgba(156,123,214,0.3);
}
.acc-lift[open] > summary { color: #f0eeff; }
.acc-lift p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}

More from 26 CSS Accordions — Vertical & Horizontal

Aurora Drift Underline Reveal Numbered Steps Plus / Minus Morph Chevron Rotate Brutalist Stamp Glass Frosted Minimal Rail Strip Tabs Image Reveal Color Block Numbered Spine

View the full collection →