Brutalist Dividers
Three raw breaks that arrive with force — a slab slamming in from the left, a hatch band wiping into view, and color blocks popping up in sequence.
Brutalist Dividers the 2nd of 18 designs in the 18 CSS Divider Collections 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
The code
<div class="div-brutalist-surface">
<p class="div-brutalist-text">CONTEMPORARY ART FOUNDATION — ANNUAL REPORT 2024. Total acquisitions: 847. Public programs attended: 12,400.</p>
<div class="div-brutalist-v1" role="separator"></div>
<p class="div-brutalist-text">The question of what constitutes public space has never been more contested — streets, plazas, parks, all subject to restriction.</p>
<div class="div-brutalist-v2" role="separator"></div>
<p class="div-brutalist-text">Architecture is political. Every building encodes a value system — a vision of who belongs and who does not.</p>
<div class="div-brutalist-v3" role="separator">
<span></span><span></span><span></span><span></span><span></span>
</div>
<p class="div-brutalist-text">WE BUILD. WE DEMOLISH. WE BUILD AGAIN. The city is its own argument — perpetually unresolved.</p>
</div> @keyframes div-bru-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-bru-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
@keyframes div-bru-pop { 0% { transform: scaleY(0); opacity: 0; } 65% { transform: scaleY(1.15); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.div-brutalist-surface {
background: #ffffff;
padding: 36px 40px;
border-radius: 12px;
}
.div-brutalist-text {
font-family: "Courier New", Courier, monospace;
font-size: 13px;
line-height: 1.78;
color: #111111;
margin: 0;
}
/* v1 — solid slab slams in */
.div-brutalist-v1 {
position: relative;
height: 18px;
margin: 32px 0;
background: #111111;
animation: div-bru-slam 0.52s cubic-bezier(.18,0,.04,1) 0.1s both;
}
.div-brutalist-v1::after {
content: '///';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-family: "Courier New", monospace;
font-size: 9px;
letter-spacing: 5px;
color: #ffffff;
}
/* v2 — diagonal hatch wipes in */
.div-brutalist-v2 {
position: relative;
height: 22px;
margin: 32px 0;
animation: div-bru-wipe 0.72s cubic-bezier(.16,1,.3,1) 0.22s both;
}
.div-brutalist-v2::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-60deg,
#111111 0, #111111 3px,
transparent 3px, transparent 11px
);
}
.div-brutalist-v2::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to right,
#ffffff 0, transparent 40px,
transparent calc(100% - 40px), #ffffff 100%
);
}
/* v3 — color blocks pop up in sequence */
.div-brutalist-v3 {
display: flex;
gap: 2px;
height: 10px;
margin: 32px 0;
}
.div-brutalist-v3 span {
transform-origin: bottom;
animation: div-bru-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-brutalist-v3 span:nth-child(1) { flex: 4; background: #111111; animation-delay: 0.26s; }
.div-brutalist-v3 span:nth-child(2) { flex: 1; background: #e6351f; animation-delay: 0.36s; }
.div-brutalist-v3 span:nth-child(3) { flex: 2; background: #111111; animation-delay: 0.42s; }
.div-brutalist-v3 span:nth-child(4) { flex: 1; background: #f2c12e; animation-delay: 0.48s; }
.div-brutalist-v3 span:nth-child(5) { flex: 4; background: #111111; animation-delay: 0.53s; }
@media (prefers-reduced-motion: reduce) {
.div-brutalist-v1, .div-brutalist-v2, .div-brutalist-v3 span { animation: none; }
}