Minimal Dividers
Three quiet, restrained breaks — a hairline that draws slowly open, three dots fading in one by one, and a section mark between fine rules.
Minimal Dividers the 11th 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-minimal-surface">
<p class="div-minimal-text">The studio was empty when she arrived — not empty between occupants, but empty in the original sense, before anything had been placed there.</p>
<div class="div-minimal-v1" role="separator"></div>
<p class="div-minimal-text">Restraint is not the same as emptiness. The most demanding discipline in any art is knowing what to remove.</p>
<div class="div-minimal-v2" role="separator"><span></span><span></span><span></span></div>
<p class="div-minimal-text">He worked slowly. The longer he looked at something, the more it revealed, and the less quickly he could move on.</p>
<div class="div-minimal-v3" role="separator">
<span class="div-minimal-rule"></span>
<em>§</em>
<span class="div-minimal-rule"></span>
</div>
<p class="div-minimal-text">The typeface had been designed in 1932 for a publication that ran for eleven issues before the war interrupted everything.</p>
</div> @keyframes div-mn-open { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-mn-fade { from { opacity: 0; } to { opacity: 1; } }
.div-minimal-surface {
background: #f9f8f6;
padding: 36px 40px;
border-radius: 12px;
}
.div-minimal-text {
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.9;
color: #3a3834;
margin: 0;
}
/* v1 — hairline draws slowly open */
.div-minimal-v1 {
height: 0.5px;
margin: 34px 0;
background: #cac7c2;
transform: scaleX(0);
transform-origin: center;
animation: div-mn-open 1.8s cubic-bezier(.16,1,.3,1) 0.1s both;
}
/* v2 — three dots fade in one by one */
.div-minimal-v2 {
display: flex;
justify-content: space-between;
align-items: center;
margin: 34px 0;
padding: 0 22%;
}
.div-minimal-v2 span {
width: 3px;
height: 3px;
border-radius: 50%;
background: #9a9690;
animation: div-mn-fade 0.7s ease both;
}
.div-minimal-v2 span:nth-child(1) { animation-delay: 0.2s; }
.div-minimal-v2 span:nth-child(2) { animation-delay: 0.65s; }
.div-minimal-v2 span:nth-child(3) { animation-delay: 1.1s; }
/* v3 — section mark between fine rules */
.div-minimal-v3 {
display: flex;
align-items: center;
gap: 20px;
margin: 34px 0;
}
.div-minimal-rule {
flex: 1;
height: 0.5px;
background: #cac7c2;
transform: scaleX(0);
animation: div-mn-open 1.2s cubic-bezier(.16,1,.3,1) 0.3s both;
}
.div-minimal-v3 .div-minimal-rule:first-child { transform-origin: right; }
.div-minimal-v3 .div-minimal-rule:last-child { transform-origin: left; animation-delay: 0.35s; }
.div-minimal-v3 em {
flex-shrink: 0;
font-family: Georgia, serif;
font-style: normal;
font-size: 12px;
color: #b0ada8;
white-space: nowrap;
animation: div-mn-fade 0.9s ease 0.9s both;
}
@media (prefers-reduced-motion: reduce) {
.div-minimal-v1, .div-minimal-rule { animation: none; transform: scaleX(1); }
.div-minimal-v2 span, .div-minimal-v3 em { animation: none; opacity: 1; }
}