26 CSS Accordions — Vertical & Horizontal

Glass Frosted

Frosted-glass card accordion with backdrop-blur and a luminous rim that brightens on open.

Pure CSS MIT licensed

Glass Frosted the 6th 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-glass" name="acc-glass" open>
  <summary>What's inside?<span class="acc-glass__caret"></span></summary>
  <p>A frosted surface with a subtle border that catches light when the row expands.</p>
</details>
<details class="acc-glass" name="acc-glass">
  <summary>Does blur cost performance?<span class="acc-glass__caret"></span></summary>
  <p>backdrop-filter is GPU-accelerated. Use it on small islands rather than wide swaths.</p>
</details>
<details class="acc-glass" name="acc-glass">
  <summary>Browser fallback?<span class="acc-glass__caret"></span></summary>
  <p>The semi-transparent background still reads gracefully without the blur effect.</p>
</details>

.acc-glass {
  background: linear-gradient(135deg, rgba(156,123,214,0.07), rgba(143,179,163,0.05));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(240,238,255,0.08);
  border-radius: 14px; margin-bottom: 8px;
  transition: border-color .3s, background .3s;
}
.acc-glass summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 14px 18px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.82);
}
.acc-glass summary::-webkit-details-marker { display: none; }
.acc-glass__caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid rgba(240,238,255,0.5);
  border-bottom: 1.5px solid rgba(240,238,255,0.5);
  transform: rotate(45deg); transition: transform .3s;
}
.acc-glass[open] {
  border-color: rgba(156,123,214,0.45);
  background: linear-gradient(135deg, rgba(156,123,214,0.14), rgba(143,179,163,0.08));
}
.acc-glass[open] .acc-glass__caret { transform: rotate(225deg); }
.acc-glass p {
  margin: 0; padding: 0 18px 16px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.6);
}

More from 26 CSS Accordions — Vertical & Horizontal

Numbered Spine Curtain Slide Vinyl Spine Cinema Reel Aurora Strip Diagonal Slant Stepped Stair Circular Arc Marquee Header Code Comment Paper Folded Equalizer

View the full collection →