Luxury Dividers
Three restrained gold breaks — a hairline that draws open then shimmers, three pearls dropping into place, and a double rule that separates with a quiet breath.
Luxury Dividers the 6th 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-luxury-surface"> <p class="div-luxury-text">The maison has existed in its current form since eighteen forty-two, though its predecessor occupied the same address for three decades prior.</p> <div class="div-luxury-v1" role="separator"></div> <p class="div-luxury-text">Each piece requires between sixty and two hundred hours of work. The stitching is invisible — this is not an accident.</p> <div class="div-luxury-v2" role="separator"><span class="div-luxury-dots"><i></i><i></i><i></i></span></div> <p class="div-luxury-text">Materials are sourced according to a protocol established in eighteen ninety-one and revised only once.</p> <div class="div-luxury-v3" role="separator"><i></i><i></i></div> <p class="div-luxury-text">There is no waiting list. There is a conversation, and then there is time — the object arrives when it is ready.</p> </div>
@keyframes div-lux-open { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-lux-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes div-lux-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-lux-drop { from { transform: scale(0) translateY(-8px); opacity: 0; } 60% { transform: scale(1.25) translateY(0); opacity: 1; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes div-lux-up { from { opacity: 0; transform: translateY(2.5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes div-lux-down { from { opacity: 0; transform: translateY(-2.5px); } to { opacity: 1; transform: translateY(0); } }
.div-luxury-surface {
background: #171310;
padding: 36px 40px;
border-radius: 12px;
}
.div-luxury-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.95;
letter-spacing: 0.02em;
color: #988e70;
margin: 0;
}
/* v1 — hairline draws open, then shimmers */
.div-luxury-v1 {
height: 1px;
margin: 34px 0;
transform: scaleX(0);
transform-origin: center;
background: linear-gradient(90deg, transparent, #d4af76 20%, #f5e4b0 50%, #d4af76 80%, transparent);
background-size: 200% auto;
animation: div-lux-open 0.95s cubic-bezier(.16,1,.3,1) 0.1s forwards,
div-lux-shimmer 3s linear 1.15s infinite;
}
/* v2 — three pearls drop in between vanishing flanks */
.div-luxury-v2 {
display: flex;
align-items: center;
margin: 34px 0;
}
.div-luxury-v2::before,
.div-luxury-v2::after {
content: '';
flex: 1;
height: 0.5px;
background: rgba(212, 175, 118, 0.22);
animation: div-lux-grow 0.8s cubic-bezier(.16,1,.3,1) 0.42s both;
}
.div-luxury-v2::before { transform-origin: right; }
.div-luxury-v2::after { transform-origin: left; animation-delay: 0.47s; }
.div-luxury-dots {
display: flex;
align-items: center;
gap: 14px;
padding: 0 20px;
}
.div-luxury-dots i {
display: block;
border-radius: 50%;
background: #d4af76;
animation: div-lux-drop 0.52s cubic-bezier(.34,1.56,.64,1) both;
}
.div-luxury-dots i:nth-child(1) { width: 3px; height: 3px; background: rgba(212,175,118,.48); animation-delay: 0.07s; }
.div-luxury-dots i:nth-child(2) { width: 6px; height: 6px; animation-delay: 0.18s; }
.div-luxury-dots i:nth-child(3) { width: 3px; height: 3px; background: rgba(212,175,118,.48); animation-delay: 0.28s; }
/* v3 — double rule separates with a quiet breath */
.div-luxury-v3 {
position: relative;
height: 5px;
margin: 34px 0;
}
.div-luxury-v3 i:nth-child(1) {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 0.5px;
background: linear-gradient(90deg, transparent, rgba(212,175,118,.65), transparent);
animation: div-lux-up 0.75s cubic-bezier(.16,1,.3,1) 0.28s both;
}
.div-luxury-v3 i:nth-child(2) {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.5px;
background: linear-gradient(90deg, transparent, rgba(212,175,118,.32), transparent);
animation: div-lux-down 0.75s cubic-bezier(.16,1,.3,1) 0.28s both;
}
@media (prefers-reduced-motion: reduce) {
.div-luxury-v1 { animation: none; transform: scaleX(1); }
.div-luxury-v2::before, .div-luxury-v2::after, .div-luxury-dots i,
.div-luxury-v3 i { animation: none; }
}