26 CSS Accordions — Vertical & Horizontal 05 / 26
Brutalist Stamp
Heavy-bordered, rectangular accordion with a hard offset shadow that flips on open.
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>
<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;
} .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 RotateGlass FrostedMinimal RailCard LiftStrip TabsImage RevealColor BlockNumbered SpineCurtain SlideVinyl SpineCinema ReelAurora Strip
View the full collection →