26 CSS Accordions — Vertical & Horizontal

Brutalist Stamp

Heavy-bordered, rectangular accordion with a hard offset shadow that flips on open.

Pure CSS MIT licensed

Brutalist Stamp the 5th 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-brut" name="acc-brut" open>
  <summary>RAW PRINCIPLES</summary>
  <p>No gradients. No shadows blurred soft. Just hard rectangles, two colors, and intent.</p>
</details>
<details class="acc-brut" name="acc-brut">
  <summary>NO COMPROMISE</summary>
  <p>Function leads form. Form documents function. Decoration earns its keep or it leaves.</p>
</details>
<details class="acc-brut" name="acc-brut">
  <summary>BUILT TO LAST</summary>
  <p>Heavy structure ages well. Trends fade. A clear typographic system stays useful.</p>
</details>

.acc-brut {
  background: #f0eeff; color: #15151d;
  border: 2px solid #15151d;
  box-shadow: 4px 4px 0 #9c7bd6;
  margin-bottom: 12px;
  transition: box-shadow .15s, transform .15s;
}
.acc-brut summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 800 12px/1 system-ui, sans-serif; letter-spacing: 0.12em;
  border-bottom: 2px solid transparent;
}
.acc-brut summary::-webkit-details-marker { display: none; }
.acc-brut[open] {
  box-shadow: 2px 2px 0 #9c7bd6;
  transform: translate(2px,2px);
}
.acc-brut[open] summary { border-bottom-color: #15151d; }
.acc-brut p {
  margin: 0; padding: 14px 16px;
  font: 12px/1.6 system-ui, sans-serif;
}

More from 26 CSS Accordions — Vertical & Horizontal

Chevron Rotate Glass Frosted Minimal Rail Card Lift Strip Tabs Image Reveal Color Block Numbered Spine Curtain Slide Vinyl Spine Cinema Reel Aurora Strip

View the full collection →