Romantic Dividers
Three soft, hand-drawn breaks — a flowering vine that draws itself leaf by leaf, a petal ornament, and a trio of diamonds set between blush rules.
Romantic Dividers the 8th 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-rom-surface">
<p class="div-rom-text">They had met, improbably, at a florist's shop on a Tuesday morning in November — he returning peonies that had died too quickly.</p>
<div class="div-rom-v1" role="separator">
<svg viewBox="0 0 476 32" fill="none" aria-hidden="true">
<path class="div-rom-vine div-rom-lv" d="M238 16 C221 9 200 7 179 12 C158 17 137 12 116 16 C95 20 74 15 53 19 C36 22 20 19 0 22" stroke="#c4826a" stroke-width="1.2"/>
<path class="div-rom-vine div-rom-rv" d="M238 16 C255 9 276 7 297 12 C318 17 339 12 360 16 C381 20 402 15 423 19 C440 22 456 19 476 22" stroke="#c4826a" stroke-width="1.2"/>
<ellipse cx="179" cy="12" rx="3.5" ry="5.5" transform="rotate(-35 179 12)" fill="#c4826a" class="div-rom-lf" style="--ld:.64s"/>
<ellipse cx="116" cy="16" rx="3" ry="5" transform="rotate(-20 116 16)" fill="#c4826a" class="div-rom-lf" style="--ld:.74s"/>
<ellipse cx="53" cy="19" rx="2.8" ry="4.5" transform="rotate(-12 53 19)" fill="#c4826a" class="div-rom-lf" style="--ld:.84s"/>
<ellipse cx="297" cy="12" rx="3.5" ry="5.5" transform="rotate(35 297 12)" fill="#c4826a" class="div-rom-lf" style="--ld:.68s"/>
<ellipse cx="360" cy="16" rx="3" ry="5" transform="rotate(20 360 16)" fill="#c4826a" class="div-rom-lf" style="--ld:.78s"/>
<ellipse cx="423" cy="19" rx="2.8" ry="4.5" transform="rotate(12 423 19)" fill="#c4826a" class="div-rom-lf" style="--ld:.88s"/>
<circle cx="238" cy="16" r="4.5" fill="#c4826a" class="div-rom-lf" style="--ld:.1s"/>
<circle cx="238" cy="16" r="7" fill="none" stroke="#c4826a" stroke-width=".8" opacity=".4" class="div-rom-lf" style="--ld:.22s"/>
</svg>
</div>
<p class="div-rom-text">The invitation had arrived on heavy cream stock, hand-addressed in ink the colour of dried roses.</p>
<div class="div-rom-v2" role="separator">
<span class="div-rom-petal div-rom-p1">❀</span>
<span class="div-rom-petal div-rom-p2">❦</span>
<span class="div-rom-petal div-rom-p3">❀</span>
</div>
<p class="div-rom-text">In the old country, weddings lasted three days and left everyone changed — not just the couple but the witnesses too.</p>
<div class="div-rom-v3" role="separator">
<span class="div-rom-gems"><i></i><i></i><i></i></span>
</div>
<p class="div-rom-text">The flowers were white roses mixed with ranunculus and a single stem of something she couldn't name.</p>
</div> @keyframes div-rom-draw { to { stroke-dashoffset: 0; } }
@keyframes div-rom-leaf { to { opacity: 1; } }
@keyframes div-rom-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-rom-pop { from { transform: scale(0); } 55% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes div-rom-gem { from { transform: rotate(45deg) scale(0); } 65% { transform: rotate(45deg) scale(1.3); } to { transform: rotate(45deg) scale(1); } }
.div-rom-surface {
background: #fdf5ed;
padding: 36px 40px;
border-radius: 12px;
}
.div-rom-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.92;
color: #4a3728;
margin: 0;
}
/* v1 — flowering vine draws itself */
.div-rom-v1 { margin: 32px 0; }
.div-rom-v1 svg { display: block; width: 100%; height: 32px; }
.div-rom-vine {
stroke-dasharray: 320;
stroke-dashoffset: 320;
animation: div-rom-draw 1.25s cubic-bezier(.16,1,.3,1) both;
}
.div-rom-rv { animation-delay: 0.05s; }
.div-rom-lf {
opacity: 0;
animation: div-rom-leaf 0.35s ease both;
animation-delay: var(--ld, 0.65s);
}
/* v2 — petal ornament */
.div-rom-v2 {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin: 32px 0;
position: relative;
}
.div-rom-v2::before,
.div-rom-v2::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 40px);
height: 0.5px;
animation: div-rom-grow 0.8s cubic-bezier(.16,1,.3,1) 0.42s both;
}
.div-rom-v2::before { left: 0; background: linear-gradient(to right, transparent, #c4826a); transform-origin: right; }
.div-rom-v2::after { right: 0; background: linear-gradient(to left, transparent, #c4826a); transform-origin: left; animation-delay: 0.47s; }
.div-rom-petal {
color: #c4826a;
animation: div-rom-pop 0.52s cubic-bezier(.34,1.56,.64,1) both;
}
.div-rom-p1 { font-size: 9px; animation-delay: 0.08s; }
.div-rom-p2 { font-size: 15px; animation-delay: 0.17s; }
.div-rom-p3 { font-size: 9px; animation-delay: 0.25s; }
/* v3 — three diamonds between blush rules */
.div-rom-v3 {
display: flex;
align-items: center;
margin: 32px 0;
}
.div-rom-v3::before,
.div-rom-v3::after {
content: '';
flex: 1;
height: 0.5px;
background: #d4a898;
animation: div-rom-grow 0.8s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-rom-v3::before { transform-origin: right; }
.div-rom-v3::after { transform-origin: left; animation-delay: 0.45s; }
.div-rom-gems {
display: flex;
align-items: center;
gap: 9px;
padding: 0 16px;
}
.div-rom-gems i {
display: block;
width: 7px;
height: 7px;
background: #c4826a;
animation: div-rom-gem 0.45s cubic-bezier(.34,1.56,.64,1) both;
}
.div-rom-gems i:nth-child(1) { animation-delay: 0.17s; }
.div-rom-gems i:nth-child(2) { width: 11px; height: 11px; animation-delay: 0.08s; }
.div-rom-gems i:nth-child(3) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
.div-rom-vine { animation: none; stroke-dashoffset: 0; }
.div-rom-lf { animation: none; opacity: 1; }
.div-rom-v2::before, .div-rom-v2::after, .div-rom-petal,
.div-rom-v3::before, .div-rom-v3::after { animation: none; }
.div-rom-gems i { animation: none; transform: rotate(45deg); }
}