Festive Dividers
Three celebration breaks — a string of fairy lights, a confetti-scatter band, and a garland swag with hanging baubles.
Festive Dividers the 16th 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-festive-surface">
<p class="div-festive-text">The hall had been decorated since dawn — every banister wound with greenery, every windowsill crowded with candles waiting, unlit, for the evening.</p>
<div class="div-festive-v1" role="separator">
<span class="div-festive-wire"></span>
<span class="div-festive-lights"><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-festive-text">By six o'clock the first guests had arrived, stamping snow from their boots, and the quiet house became, all at once, impossibly loud and warm.</p>
<div class="div-festive-v2" role="separator"></div>
<p class="div-festive-text">There was a long table, and then a longer one added end to end, and still the children ate standing up because that, apparently, was more fun.</p>
<div class="div-festive-v3" role="separator">
<svg viewBox="0 0 476 26" fill="none" aria-hidden="true">
<path class="div-festive-swag" d="M0 3 Q119 34 238 3 Q357 34 476 3" stroke="#2f9e5e" stroke-width="3" stroke-linecap="round"/>
<circle class="div-festive-bauble div-festive-b1" cx="119" cy="19" r="4.5" fill="#e0455a"/>
<circle class="div-festive-bauble div-festive-b2" cx="238" cy="22" r="5" fill="#e8b53d"/>
<circle class="div-festive-bauble div-festive-b3" cx="357" cy="19" r="4.5" fill="#e0455a"/>
</svg>
</div>
<p class="div-festive-text">When the candles were finally lit, someone turned off the lamps, and for a moment nobody spoke — the whole room held inside that small, gold light.</p>
</div> @keyframes div-fes-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fes-glow { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); } to { transform: scale(1); opacity: 1; } }
@keyframes div-fes-fall { from { transform: translateY(-10px) rotate(0); opacity: 0; } to { transform: translateY(0) rotate(var(--r,0deg)); opacity: 1; } }
@keyframes div-fes-draw { to { stroke-dashoffset: 0; } }
@keyframes div-fes-drop { from { transform: scale(0) translateY(-6px); } 60% { transform: scale(1.25) translateY(0); } to { transform: scale(1) translateY(0); } }
.div-festive-surface {
background: #0f2418;
padding: 36px 40px;
border-radius: 12px;
}
.div-festive-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.85;
color: #b8c4b0;
margin: 0;
}
/* v1 — string of fairy lights */
.div-festive-v1 {
position: relative;
height: 16px;
margin: 32px 0;
}
.div-festive-wire {
position: absolute;
top: 4px;
left: 0;
right: 0;
height: 1px;
background: #3a5a44;
transform-origin: left;
animation: div-fes-grow 0.7s cubic-bezier(.16,1,.3,1) both;
}
.div-festive-lights {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.div-festive-lights i {
width: 8px;
height: 11px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
margin-top: 4px;
transform-origin: top;
animation: div-fes-glow 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.div-festive-lights i:nth-child(4n+1) { background: #e8b53d; box-shadow: 0 0 7px rgba(232,181,61,0.7); }
.div-festive-lights i:nth-child(4n+2) { background: #e0455a; box-shadow: 0 0 7px rgba(224,69,90,0.7); }
.div-festive-lights i:nth-child(4n+3) { background: #4fb8d4; box-shadow: 0 0 7px rgba(79,184,212,0.7); }
.div-festive-lights i:nth-child(4n) { background: #5fc77a; box-shadow: 0 0 7px rgba(95,199,122,0.7); }
.div-festive-lights i:nth-child(1) { animation-delay: 0.4s; }
.div-festive-lights i:nth-child(2) { animation-delay: 0.46s; }
.div-festive-lights i:nth-child(3) { animation-delay: 0.52s; }
.div-festive-lights i:nth-child(4) { animation-delay: 0.58s; }
.div-festive-lights i:nth-child(5) { animation-delay: 0.64s; }
.div-festive-lights i:nth-child(6) { animation-delay: 0.70s; }
.div-festive-lights i:nth-child(7) { animation-delay: 0.76s; }
.div-festive-lights i:nth-child(8) { animation-delay: 0.82s; }
.div-festive-lights i:nth-child(9) { animation-delay: 0.88s; }
.div-festive-lights i:nth-child(10) { animation-delay: 0.94s; }
.div-festive-lights i:nth-child(11) { animation-delay: 1.00s; }
.div-festive-lights i:nth-child(12) { animation-delay: 1.06s; }
/* v2 — confetti-scatter band */
.div-festive-v2 {
height: 18px;
margin: 32px 0;
background:
radial-gradient(circle, #e8b53d 1.5px, transparent 2px) 0 2px / 26px 18px,
radial-gradient(circle, #e0455a 1.5px, transparent 2px) 13px 11px / 26px 18px,
radial-gradient(circle, #4fb8d4 1.5px, transparent 2px) 7px 14px / 19px 18px,
radial-gradient(circle, #5fc77a 1.5px, transparent 2px) 19px 4px / 23px 18px;
background-repeat: repeat-x;
transform-origin: center;
animation: div-fes-grow 0.85s cubic-bezier(.16,1,.3,1) 0.1s both;
}
/* v3 — garland swag with hanging baubles */
.div-festive-v3 { margin: 32px 0; }
.div-festive-v3 svg { display: block; width: 100%; height: 26px; }
.div-festive-swag {
stroke-dasharray: 540;
stroke-dashoffset: 540;
animation: div-fes-draw 1s cubic-bezier(.16,1,.3,1) both;
}
.div-festive-bauble {
transform-box: fill-box;
transform-origin: center top;
animation: div-fes-drop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.div-festive-b1 { animation-delay: 0.78s; }
.div-festive-b2 { animation-delay: 0.9s; }
.div-festive-b3 { animation-delay: 1.02s; }
@media (prefers-reduced-motion: reduce) {
.div-festive-wire, .div-festive-lights i, .div-festive-v2 { animation: none; }
.div-festive-swag { animation: none; stroke-dashoffset: 0; }
.div-festive-bauble { animation: none; }
}