18 CSS Divider Collections 15 / 18
Music Dividers
Three sound-themed breaks — rising equalizer bars, a waveform pulse line, and a concentric vinyl-groove rule.
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> <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; }
} @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; }
}