Music Dividers
Three sound-themed breaks — rising equalizer bars, a waveform pulse line, and a concentric vinyl-groove rule.
Music Dividers the 15th 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-music-surface">
<p class="div-music-text">The record opens with eleven seconds of room tone — the sound of the studio itself, breathing, before the first note is allowed to arrive.</p>
<div class="div-music-v1" role="separator">
<span class="div-music-eq"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
</div>
<p class="div-music-text">Side two was recorded live in a single take, the engineer refusing to stop the tape even when the bassist's string broke four bars from the end.</p>
<div class="div-music-v2" role="separator">
<svg viewBox="0 0 476 24" fill="none" preserveAspectRatio="none" aria-hidden="true">
<path class="div-music-wave" d="M0 12 L40 12 L52 4 L64 20 L76 8 L88 16 L100 12 L150 12 L162 2 L174 22 L186 6 L198 18 L210 12 L280 12 L292 5 L304 19 L316 9 L328 15 L340 12 L410 12 L422 3 L434 21 L446 7 L458 17 L476 12" stroke="#15d18a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<p class="div-music-text">The mastering took longer than the recording — six weeks spent moving a single frequency band a fraction of a decibel, listening, then moving it back.</p>
<div class="div-music-v3" role="separator"><span class="div-music-vinyl"></span></div>
<p class="div-music-text">When the test pressing arrived, the band listened to it in a parked car, because the car was where, the singer said, music was actually heard.</p>
</div> @keyframes div-mus-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes div-mus-draw { to { stroke-dashoffset: 0; } }
@keyframes div-mus-spin { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.div-music-surface {
background: #0e1014;
padding: 36px 40px;
border-radius: 12px;
}
.div-music-text {
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.82;
color: #8a93a0;
margin: 0;
}
/* v1 — rising equalizer bars */
.div-music-v1 { margin: 32px 0; }
.div-music-eq {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 26px;
}
.div-music-eq i {
flex: 1;
margin: 0 1.5px;
border-radius: 1.5px;
background: linear-gradient(to top, #15d18a, #15d18a 60%, rgba(21,209,138,0.35));
transform-origin: bottom;
animation: div-mus-rise 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.div-music-eq i:nth-child(odd) { height: 60%; }
.div-music-eq i:nth-child(even) { height: 100%; }
.div-music-eq i:nth-child(3n) { height: 38%; }
.div-music-eq i:nth-child(1) { animation-delay: 0.04s; }
.div-music-eq i:nth-child(2) { animation-delay: 0.08s; }
.div-music-eq i:nth-child(3) { animation-delay: 0.12s; }
.div-music-eq i:nth-child(4) { animation-delay: 0.16s; }
.div-music-eq i:nth-child(5) { animation-delay: 0.20s; }
.div-music-eq i:nth-child(6) { animation-delay: 0.24s; }
.div-music-eq i:nth-child(7) { animation-delay: 0.28s; }
.div-music-eq i:nth-child(8) { animation-delay: 0.32s; }
.div-music-eq i:nth-child(9) { animation-delay: 0.36s; }
.div-music-eq i:nth-child(10) { animation-delay: 0.40s; }
.div-music-eq i:nth-child(11) { animation-delay: 0.44s; }
.div-music-eq i:nth-child(12) { animation-delay: 0.48s; }
.div-music-eq i:nth-child(n+13) { animation-delay: 0.52s; }
/* v2 — waveform pulse line */
.div-music-v2 { margin: 32px 0; }
.div-music-v2 svg { display: block; width: 100%; height: 24px; }
.div-music-wave {
stroke-dasharray: 900;
stroke-dashoffset: 900;
animation: div-mus-draw 1.2s cubic-bezier(.16,1,.3,1) both;
}
/* v3 — concentric vinyl-groove rule */
.div-music-v3 {
display: flex;
align-items: center;
margin: 32px 0;
}
.div-music-v3::before,
.div-music-v3::after {
content: '';
flex: 1;
height: 4px;
/* concentric grooves rendered as repeating lines */
background: repeating-linear-gradient(to bottom, rgba(21,209,138,0.4) 0 1px, transparent 1px 2px);
}
.div-music-vinyl {
flex-shrink: 0;
width: 16px;
height: 16px;
margin: 0 14px;
border-radius: 50%;
background: radial-gradient(circle, #15d18a 0 3px, #0e1014 3px 4px, #15d18a 4px 5px, #0e1014 5px 6px, #15d18a 6px 7px, #0e1014 7px 8px);
animation: div-mus-spin 0.55s cubic-bezier(.34,1.56,.64,1) 0.3s both;
}
@media (prefers-reduced-motion: reduce) {
.div-music-eq i { animation: none; }
.div-music-wave { animation: none; stroke-dashoffset: 0; }
.div-music-vinyl { animation: none; }
}