26 CSS Accordions — Vertical & Horizontal 08 / 26
Card Lift
Floating cards that lift with a soft shadow when expanded — accent color shifts subtly.
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>
<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);
} .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 DriftUnderline RevealNumbered StepsPlus / Minus MorphChevron RotateBrutalist StampGlass FrostedMinimal RailStrip TabsImage RevealColor BlockNumbered Spine
View the full collection →