Art Deco Dividers
Three gilded breaks — gold lines that draw themselves toward a diamond, a shimmering micro-diamond band, and a chevron fan that springs into place.
Art Deco Dividers the 3rd 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-deco-surface">
<p class="div-deco-text">The Grand Palais reopened its gilded doors in the autumn of 1922, its iron-and-glass vault catching the afternoon light.</p>
<div class="div-deco-v1" role="separator">
<svg viewBox="0 0 476 24" fill="none" aria-hidden="true">
<line class="div-deco-l div-deco-ll1" x1="198" y1="11" x2="0" y2="11" stroke="#c9a84c" stroke-width="1.5"/>
<line class="div-deco-l div-deco-ll2" x1="186" y1="15" x2="12" y2="15" stroke="#c9a84c" stroke-width=".5" opacity=".42"/>
<polygon class="div-deco-gem" points="238,3 251,12 238,21 225,12" stroke="#c9a84c" stroke-width="1.5" fill="#0d1018"/>
<line class="div-deco-l div-deco-rl1" x1="278" y1="11" x2="476" y2="11" stroke="#c9a84c" stroke-width="1.5"/>
<line class="div-deco-l div-deco-rl2" x1="290" y1="15" x2="464" y2="15" stroke="#c9a84c" stroke-width=".5" opacity=".42"/>
</svg>
</div>
<p class="div-deco-text">She wore a dress the colour of champagne with a hem that ended precisely at the knee — scandalous only three years prior.</p>
<div class="div-deco-v2" role="separator"></div>
<p class="div-deco-text">The jazz arrived from New Orleans by way of Harlem, crossing the Atlantic in the trunks of musicians.</p>
<div class="div-deco-v3" role="separator"><span class="div-deco-fan">▴▴▴</span></div>
<p class="div-deco-text">Everything gleamed in those years — chrome fittings, lacquered surfaces, pomaded hair in the lamplight.</p>
</div> @keyframes div-deco-draw { to { stroke-dashoffset: 0; } }
@keyframes div-deco-gem { from { opacity: 0; transform: scale(0) rotate(-180deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes div-deco-fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes div-deco-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-deco-fan { from { transform: scale(0) rotate(-100deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes div-deco-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.div-deco-surface {
background: #0d1018;
padding: 36px 40px;
border-radius: 12px;
}
.div-deco-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.88;
color: #a0988a;
margin: 0;
}
/* v1 — gold lines draw toward a diamond */
.div-deco-v1 { margin: 32px 0; }
.div-deco-v1 svg { display: block; width: 100%; height: 24px; }
.div-deco-l { animation: div-deco-draw 0.88s cubic-bezier(.16,1,.3,1) both; }
.div-deco-ll1 { stroke-dasharray: 198; stroke-dashoffset: 198; }
.div-deco-ll2 { stroke-dasharray: 174; stroke-dashoffset: 174; animation-delay: 0.09s; }
.div-deco-rl1 { stroke-dasharray: 198; stroke-dashoffset: 198; animation-delay: 0.04s; }
.div-deco-rl2 { stroke-dasharray: 174; stroke-dashoffset: 174; animation-delay: 0.13s; }
.div-deco-gem {
transform-box: fill-box;
transform-origin: center;
animation: div-deco-gem 0.52s cubic-bezier(.34,1.56,.64,1) 0.73s both;
}
/* v2 — micro-diamond band with a shimmer sweep */
.div-deco-v2 {
position: relative;
margin: 32px 0;
animation: div-deco-fade 0.55s ease 0.18s both;
}
.div-deco-v2::before {
content: '';
display: block;
height: 6px;
border-top: 1px solid #c9a84c;
border-bottom: 1px solid #c9a84c;
}
.div-deco-v2::after {
content: '◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆';
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
overflow: hidden;
white-space: nowrap;
text-align: center;
font-size: 6px;
letter-spacing: 2px;
background: linear-gradient(90deg, rgba(201,168,76,.1) 0%, rgba(201,168,76,.9) 42%, rgba(255,220,140,1) 50%, rgba(201,168,76,.9) 58%, rgba(201,168,76,.1) 100%);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: div-deco-shimmer 2.8s linear infinite;
}
/* v3 — chevron fan springs in between growing lines */
.div-deco-v3 {
display: flex;
align-items: center;
gap: 10px;
margin: 32px 0;
}
.div-deco-v3::before,
.div-deco-v3::after {
content: '';
flex: 1;
height: 1px;
animation: div-deco-grow 0.7s cubic-bezier(.16,1,.3,1) 0.48s both;
}
.div-deco-v3::before { background: linear-gradient(to right, transparent, #c9a84c); transform-origin: right; }
.div-deco-v3::after { background: linear-gradient(to left, transparent, #c9a84c); transform-origin: left; animation-delay: 0.52s; }
.div-deco-fan {
flex-shrink: 0;
font-size: 10px;
letter-spacing: 2px;
color: #c9a84c;
animation: div-deco-fan 0.6s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
@media (prefers-reduced-motion: reduce) {
.div-deco-l { animation: none; stroke-dashoffset: 0; }
.div-deco-gem, .div-deco-v2, .div-deco-v3::before, .div-deco-v3::after, .div-deco-fan { animation: none; }
.div-deco-v2::after { animation: none; }
}