26 CSS Accordions — Vertical & Horizontal

Holographic Slot

Open row shows a holographic gradient sweep — like a foil sticker catching light.

Pure CSS MIT licensed

Holographic Slot the 25th 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-holo" name="acc-holo" open>
  <summary>Foil A · Aurora</summary>
  <p>Cool ribbon of violet to cyan, sweeping at 20 degrees. Catches light at any angle.</p>
</details>
<details class="acc-holo" name="acc-holo">
  <summary>Foil B · Copper</summary>
  <p>Warm metallic with a soft inner glow. Reads premium without going gold.</p>
</details>
<details class="acc-holo" name="acc-holo">
  <summary>Foil C · Mint</summary>
  <p>Cooler than gold, less corporate than silver. Quiet and confident.</p>
</details>

.acc-holo {
  background: #15151d; border: 1px solid rgba(240,238,255,0.06);
  border-radius: 10px; margin-bottom: 6px; overflow: hidden;
  position: relative;
}
.acc-holo summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; color: rgba(240,238,255,0.7);
  position: relative; z-index: 2;
}
.acc-holo summary::-webkit-details-marker { display: none; }
.acc-holo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg,
    transparent 30%, rgba(156,123,214,0.4) 45%,
    rgba(212,154,92,0.4) 55%, rgba(143,179,163,0.4) 65%,
    transparent 80%);
  background-size: 250% 100%; background-position: 100% 0;
  opacity: 0; transition: opacity .35s, background-position 1.6s ease-out;
}
.acc-holo[open] { border-color: rgba(212,154,92,0.4); }
.acc-holo[open]::before { opacity: 1; background-position: 0% 0; }
.acc-holo[open] > summary { color: #f0eeff; }
.acc-holo p {
  margin: 0; padding: 0 16px 14px; position: relative; z-index: 2;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
}

More from 26 CSS Accordions — Vertical & Horizontal

Circular Arc Marquee Header Code Comment Paper Folded Equalizer Stacked Cards Aurora Drift Underline Reveal Numbered Steps Plus / Minus Morph Chevron Rotate Brutalist Stamp

View the full collection →