26 CSS Accordions — Vertical & Horizontal

Cinema Reel

Film-strip style horizontal accordion — sprocket holes top and bottom, frame brightens on focus.

Pure CSS MIT licensed

Cinema Reel the 15th 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

<div class="acc-reel">
  <div class="acc-reel__strip">
    <input type="radio" name="reel" id="reel-1" checked />
    <input type="radio" name="reel" id="reel-2" />
    <input type="radio" name="reel" id="reel-3" />
    <label for="reel-1" class="acc-reel__f"><span>SCENE 01 · Daybreak</span></label>
    <label for="reel-2" class="acc-reel__f"><span>SCENE 02 · Pursuit</span></label>
    <label for="reel-3" class="acc-reel__f"><span>SCENE 03 · Resolve</span></label>
  </div>
</div>

.acc-reel {
  background: #15151d; padding: 12px 0; border-radius: 8px;
  height: 220px; display: flex; align-items: center;
}
.acc-reel__strip {
  display: flex; gap: 4px; width: 100%; padding: 18px 12px;
  background:
    linear-gradient(#0a0a10,#0a0a10) center/100% calc(100% - 24px) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(240,238,255,0.12) 8px 14px) top/100% 12px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(240,238,255,0.12) 8px 14px) bottom/100% 12px no-repeat;
}
.acc-reel__strip > input { display: none; }
.acc-reel__f {
  flex: 1; cursor: pointer; min-height: 130px;
  background: linear-gradient(135deg,#3a2a55,#2a1a45);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 system-ui; letter-spacing: 0.1em; color: rgba(240,238,255,0.4);
  filter: brightness(0.65) contrast(0.85);
  transition: flex .5s cubic-bezier(.3,1,.3,1), filter .3s, color .3s;
}
.acc-reel__f:nth-of-type(2) { background: linear-gradient(135deg,#553a2a,#451a1a); }
.acc-reel__f:nth-of-type(3) { background: linear-gradient(135deg,#2a553a,#1a4530); }
#reel-1:checked ~ [for="reel-1"],
#reel-2:checked ~ [for="reel-2"],
#reel-3:checked ~ [for="reel-3"] {
  flex: 4; filter: brightness(1.1) contrast(1.05);
  color: #f0eeff; font-size: 13px;
}

More from 26 CSS Accordions — Vertical & Horizontal

Holographic Slot Aurora Drift Underline Reveal Numbered Steps Plus / Minus Morph Chevron Rotate Brutalist Stamp Glass Frosted Minimal Rail Card Lift Strip Tabs Image Reveal

View the full collection →