32 CSS Accordions — Vertical & Horizontal
23 / 32

All 32 in 32 CSS Accordions — Vertical & Horizontal

  1. 01Pure CSS FAQ Accordion with <details> and <summary> (No JavaScript)
  2. 02Mobile Navigation Accordion Menu (CSS-Only Hamburger + Drill-Down)
  3. 03E-commerce Filter Sidebar Accordion with Exclusive Open (Product Filters)
  4. 04Nested Multi-Level Accordion (CSS Tree View for Docs & File Explorers)
  5. 05Smoothly Animated <details> Accordion — Transition height: auto in Pure CSS
  6. 06Exclusive Single-Open Accordion with the details name Attribute (Close Others Automatically)
  7. 07Underline Reveal Accordion — Editorial Minimal with Animated Rules
  8. 08Numbered Steps Accordion — Process Timeline for Onboarding Flows
  9. 09Plus / Minus Morph Accordion — CSS-Drawn Icon Animation
  10. 10Chevron Rotate Card Accordion — The Production Default, Perfected
  11. 11Brutalist Stamp Accordion — Bold Borders, Hard Shadows, Zero Subtlety
  12. 12Glassmorphism Frosted Accordion with backdrop-filter Blur
  13. 13Minimal Rail Accordion — Timeline Dot Spine for Changelogs & Roadmaps
  14. 14Card Lift Accordion — Elevation & Scale on Open (Material-Style Depth)
  15. 15Diagonal Slant Accordion — Skewed Parallelogram Headers
  16. 16Stepped Stair Accordion — Indented Cascade with Depth Levels
  17. 17Circular Dial Accordion — Conic-Gradient Progress Ring Toggles
  18. 18Marquee Header Accordion — Scrolling Ticker Titles on the Open Item
  19. 19Code Comment Accordion — Editor-Themed Collapsible Doc Blocks
  20. 20Paper Fold 3D Accordion — perspective + rotateX Unfolding Panels
  21. 21Equalizer Accordion — Animated Level Bars for Playlists & Audio
  22. 22Stacked Cards Deck Accordion — Overlapping Pull-Out Hand
  23. 23Holographic Slot Accordion — @property Rotating Border Sheen
  24. 24Aurora Drift Accordion — Dark Ambient Glow that Follows the Open Item
  25. 25Horizontal Strip Tabs Accordion — Vertical Text Columns with flex-grow
  26. 26Horizontal Image Reveal Accordion — Expanding Photo Gallery Panels
  27. 27Color Block Horizontal Accordion — Bold Flat Panels for Feature Sections
  28. 28Numbered Spine Horizontal Accordion — Editorial Magazine Index
  29. 29Curtain Slide Horizontal Accordion — clip-path Reveal Panels
  30. 30Vinyl Spine Horizontal Accordion — Record Shelf with Pull-Out Sleeves
  31. 31Cinema Reel Horizontal Accordion — Dark Letterboxed Showcase
  32. 32Aurora Strip Horizontal Accordion — Animated Gradient Glow Panels
Pure CSSMIT licensed

Holographic Slot Accordion — @property Rotating Border Sheen

Each closed item is a dark slot ringed by a faint conic seam; the open one ignites — a holographic gradient beam orbits its border continuously while an iridescent sheen sweeps the header text. The 'animated gradient border' effect done properly with a registered @property angle and mask-composited ring, for AI products, gaming and dev-tool launches.

Live Demo
Plain CSSTailwind v4
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<section class="acc-31" aria-label="Holographic slot accordion demo">
  <div class="acc-31__wrap">
    <p class="acc-31__kicker">Nova Runtime</p>
    <h3 class="acc-31__title">What's inside the beta</h3>
    <details class="acc-31__item" open>
      <summary class="acc-31__sum">Instant cold starts<span class="acc-31__chev"></span></summary>
      <div class="acc-31__body"><p>Snapshots of your initialized runtime resume in under 5ms — the function is warm before the request finishes its TLS handshake.</p></div>
    </details>
    <details class="acc-31__item">
      <summary class="acc-31__sum">Typed edge storage<span class="acc-31__chev"></span></summary>
      <div class="acc-31__body"><p>A schema-checked KV replicated to every region. Reads are local everywhere; writes converge in ~80ms worldwide.</p></div>
    </details>
    <details class="acc-31__item">
      <summary class="acc-31__sum">Time-travel debugging<span class="acc-31__chev"></span></summary>
      <div class="acc-31__body"><p>Every production request is replayable locally with its exact inputs, clock and network responses. Heisenbugs lose their superpower.</p></div>
    </details>
  </div>
</section>
@property --acc-31-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

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

.acc-31 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0d12;
  padding: 44px 24px;
}

.acc-31__wrap {
  width: min(560px,100%);
}

.acc-31__kicker {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7c8398;
}

.acc-31__title {
  font-size: 25px;
  font-weight: 800;
  color: #eef0f8;
  letter-spacing: -.02em;
  margin: 6px 0 18px;
}

.acc-31__item {
  position: relative;
  background: #13151d;
  border-radius: 14px;
  margin-bottom: 12px;
}

.acc-31__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1.5px;
  background: conic-gradient(from var(--acc-31-a),#ff6ad5,#8f6aff,#6ad5ff,#6affb0,#ff6ad5);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .12;
  transition: opacity .4s;
  pointer-events: none;
}

.acc-31__item:hover::before {
  opacity: .4;
}

.acc-31__item[open]::before {
  opacity: 1;
  animation: acc-31-orbit 3.5s linear infinite;
}

@keyframes acc-31-orbit {
  to {
    --acc-31-a: 360deg;
  }
}

.acc-31__sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #d8dcea;
  cursor: pointer;
}

.acc-31__sum::-webkit-details-marker {
  display: none;
}

.acc-31__sum::marker {
  content: "";
}

.acc-31__item[open] .acc-31__sum {
  background: linear-gradient(100deg,#ff6ad5,#8f6aff,#6ad5ff,#6affb0) 0 0/300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: acc-31-sheen 3s ease-in-out infinite alternate;
}

@keyframes acc-31-sheen {
  to {
    background-position: 100% 0;
  }
}

.acc-31__chev {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #7c8398;
  border-bottom: 2px solid #7c8398;
  rotate: 45deg;
  translate: 0 -1.5px;
  transition: rotate .3s;
  flex: none;
}

.acc-31__item[open] .acc-31__chev {
  rotate: 225deg;
  translate: 0 1.5px;
}

.acc-31__body {
  padding: 0 20px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #9ba3ba;
}

.acc-31__item[open] .acc-31__body {
  animation: acc-31-in .35s ease-out;
}

@keyframes acc-31-in {
  from {
    opacity: 0;
    translate: 0 -5px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.acc-31__sum:focus-visible {
  outline: 3px solid #8f6aff;
  outline-offset: 3px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .acc-31__item[open]::before {
    animation: none;
  }

  .acc-31__item[open] .acc-31__sum {
    animation: none;
  }

  .acc-31__item[open] .acc-31__body {
    animation: none;
  }
}
/* No JavaScript — a registered @property angle rotates a conic gradient hollowed into a 1.5px ring via mask-composite:exclude; the orbit and text sheen run only while details[open]. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Accordions — Vertical & Horizontal from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Holographic Slot Accordion — @property Rotating Border Sheen
Source: https://codefronts.com/navigation/css-accordions/holographic-slot/

Each closed item is a dark slot ringed by a faint conic seam; the open one ignites — a holographic gradient beam orbits its border continuously while an iridescent sheen sweeps the header text. The 'animated gradient border' effect done properly with a registered @property angle and mask-composited ring, for AI products, gaming and dev-tool launches.
## HTML
```html
<section class="acc-31" aria-label="Holographic slot accordion demo">
  <div class="acc-31__wrap">
    <p class="acc-31__kicker">Nova Runtime</p>
    <h3 class="acc-31__title">What's inside the beta</h3>
    <details class="acc-31__item" open>
      <summary class="acc-31__sum">Instant cold starts<span class="acc-31__chev"></span></summary>
      <div class="acc-31__body"><p>Snapshots of your initialized runtime resume in under 5ms — the function is warm before the request finishes its TLS handshake.</p></div>
    </details>
    <details class="acc-31__item">
      <summary class="acc-31__sum">Typed edge storage<span class="acc-31__chev"></span></summary>
      <div class="acc-31__body"><p>A schema-checked KV replicated to every region. Reads are local everywhere; writes converge in ~80ms worldwide.</p></div>
    </details>
    <details class="acc-31__item">
      <summary class="acc-31__sum">Time-travel debugging<span class="acc-31__chev"></span></summary>
      <div class="acc-31__body"><p>Every production request is replayable locally with its exact inputs, clock and network responses. Heisenbugs lose their superpower.</p></div>
    </details>
  </div>
</section>
```
## CSS
```css
@property --acc-31-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

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

.acc-31 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0d12;
  padding: 44px 24px;
}

.acc-31__wrap {
  width: min(560px,100%);
}

.acc-31__kicker {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7c8398;
}

.acc-31__title {
  font-size: 25px;
  font-weight: 800;
  color: #eef0f8;
  letter-spacing: -.02em;
  margin: 6px 0 18px;
}

.acc-31__item {
  position: relative;
  background: #13151d;
  border-radius: 14px;
  margin-bottom: 12px;
}

.acc-31__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1.5px;
  background: conic-gradient(from var(--acc-31-a),#ff6ad5,#8f6aff,#6ad5ff,#6affb0,#ff6ad5);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .12;
  transition: opacity .4s;
  pointer-events: none;
}

.acc-31__item:hover::before {
  opacity: .4;
}

.acc-31__item[open]::before {
  opacity: 1;
  animation: acc-31-orbit 3.5s linear infinite;
}

@keyframes acc-31-orbit {
  to {
    --acc-31-a: 360deg;
  }
}

.acc-31__sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #d8dcea;
  cursor: pointer;
}

.acc-31__sum::-webkit-details-marker {
  display: none;
}

.acc-31__sum::marker {
  content: "";
}

.acc-31__item[open] .acc-31__sum {
  background: linear-gradient(100deg,#ff6ad5,#8f6aff,#6ad5ff,#6affb0) 0 0/300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: acc-31-sheen 3s ease-in-out infinite alternate;
}

@keyframes acc-31-sheen {
  to {
    background-position: 100% 0;
  }
}

.acc-31__chev {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #7c8398;
  border-bottom: 2px solid #7c8398;
  rotate: 45deg;
  translate: 0 -1.5px;
  transition: rotate .3s;
  flex: none;
}

.acc-31__item[open] .acc-31__chev {
  rotate: 225deg;
  translate: 0 1.5px;
}

.acc-31__body {
  padding: 0 20px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #9ba3ba;
}

.acc-31__item[open] .acc-31__body {
  animation: acc-31-in .35s ease-out;
}

@keyframes acc-31-in {
  from {
    opacity: 0;
    translate: 0 -5px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.acc-31__sum:focus-visible {
  outline: 3px solid #8f6aff;
  outline-offset: 3px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .acc-31__item[open]::before {
    animation: none;
  }

  .acc-31__item[open] .acc-31__sum {
    animation: none;
  }

  .acc-31__item[open] .acc-31__body {
    animation: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — a registered @property angle rotates a conic gradient hollowed into a 1.5px ring via mask-composite:exclude; the orbit and text sheen run only while details[open]. */
```

How this works

The orbiting border is the modern recipe: a registered @property --acc-31-a (syntax '<angle>') drives conic-gradient(from var(--acc-31-a), …) painted on a ::before covering the card, which is then hollowed into a 1.5px ring using the padding-box/border-box double-mask (mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude). Animating the registered angle rotates the gradient smoothly — no rotating element, no overflow hacks, corners stay perfect.

Closed items keep the ring static at 12% opacity (a seam of potential); [open] raises opacity to full and starts the orbit. The header text gets a matching iridescent treatment — a background-clip:text gradient sweeping once via background-position. Both animations run ONLY on the open item, so a page of slots idles at zero cost.

Techniques used: @property <angle> conic rotation · double-mask + mask-composite:exclude gradient ring (perfect corners) · opacity-staged ring (seam→ignited) · background-clip:text sheen sweep · animation scoped to [open] for zero idle cost

Make it yours

  • Hologram palette = the conic's four stops (keep first = last for seamless orbit).
  • Ring weight = the ::before padding (1.5px).
  • Orbit speed = the acc-31-orbit duration (slower = more luxurious).
  • Ignition threshold: give :hover the 40% opacity ring as a midpoint.

Gotchas — read before shipping

  • Register the angle with @property or the orbit snaps once per loop instead of rotating — unregistered properties don't interpolate.
  • The mask-composite pair needs both the -webkit- and standard forms for full coverage (both included).
  • Keep ring opacity ≤15% at rest — a page of fully-lit gradient borders is a carnival, and the ignition contrast IS the design.
  • Iridescent text must pass contrast at every gradient stop; these stops all sit ≥4.5:1 on the near-black card.

Browser support

ChromeSafariFirefoxEdge
85+ (@property)16.4+128+85+ (@property)

@property + mask-composite are baseline since 2024. Older browsers show a static ring — the design survives intact.

Techniques used in this demo

mask-compositeMDN ↗background-clip: textMDN ↗@propertyMDN ↗conic-gradient()MDN ↗@keyframesMDN ↗:focus-visibleMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →