Cyber Dividers
Three terminal-styled breaks — a beam scanning a track, a dot-matrix grid with a pulse bar growing across it, and a system tag that types itself in.
Cyber Dividers the 5th 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-cyber-surface"> <p class="div-cyber-text">> ESTABLISHING SECURE CHANNEL... [OK]<br>> SESSION_ID: 0x7FA3-C891-02BE</p> <div class="div-cyber-v1" role="separator"></div> <p class="div-cyber-text">The attack surface of a modern data center is not its perimeter — that concept is meaningless now.</p> <div class="div-cyber-v2" role="separator"><span class="div-cyber-bar"></span></div> <p class="div-cyber-text">> ANOMALY DETECTED: 847 req/sec from 10.0.14.x<br>> AUTO-THROTTLE: ENGAGED</p> <div class="div-cyber-v3" role="separator"><span class="div-cyber-tag">[ SYSTEM NOMINAL ]</span></div> <p class="div-cyber-text">Cryptography is applied mathematics in service of trust — the implementations are where the problems live.</p> </div>
@keyframes div-cy-beam { from { left: -22%; } to { left: 122%; } }
@keyframes div-cy-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-cy-type { from { max-width: 0; opacity: 0; } 1% { opacity: 1; } to { max-width: 220px; opacity: 1; } }
@keyframes div-cy-glitch { 0%,87%,100% { transform: none; } 88% { transform: translateX(3px); } 89% { transform: translateX(-2px); } 90% { transform: none; } 94% { transform: translateX(1px); } 95% { transform: none; } }
.div-cyber-surface {
background: #060a0f;
padding: 36px 40px;
border-radius: 12px;
}
.div-cyber-text {
font-family: "Courier New", Courier, monospace;
font-size: 12.5px;
line-height: 1.78;
color: #2a5848;
margin: 0;
}
/* v1 — scanning beam over a faint track */
.div-cyber-v1 {
position: relative;
height: 2px;
margin: 38px 0;
background: rgba(0, 245, 200, 0.1);
overflow: visible;
}
.div-cyber-v1::before {
content: '';
position: absolute;
top: -5px;
left: -22%;
width: 22%;
height: 12px;
background: linear-gradient(90deg, transparent, rgba(0,245,200,0.95), transparent);
animation: div-cy-beam 2.1s linear infinite;
}
.div-cyber-v1::after {
content: '// 0x4F2A·C8';
position: absolute;
right: 0;
top: -15px;
font-family: "Courier New", monospace;
font-size: 8.5px;
letter-spacing: 0.08em;
color: rgba(0, 245, 200, 0.35);
}
/* v2 — dot-matrix grid, pulse bar grows across */
.div-cyber-v2 {
position: relative;
height: 20px;
margin: 38px 0;
display: flex;
align-items: center;
}
.div-cyber-v2::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(0,245,200,0.5) 1px, transparent 1px) 0 0 / 12px 20px;
}
.div-cyber-bar {
position: absolute;
left: 0;
right: 0;
top: 8px;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(0,245,200,0.3), transparent);
transform-origin: center;
animation: div-cy-grow 0.85s cubic-bezier(.16,1,.3,1) 0.44s both;
}
/* v3 — system tag types itself in, then glitches */
.div-cyber-v3 {
display: flex;
align-items: center;
gap: 14px;
margin: 38px 0;
}
.div-cyber-v3::before,
.div-cyber-v3::after {
content: '';
flex: 1;
height: 1px;
animation: div-cy-grow 0.6s ease 0.68s both;
}
.div-cyber-v3::before { background: linear-gradient(90deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: right; }
.div-cyber-v3::after { background: linear-gradient(270deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: left; animation-delay: 0.73s; }
.div-cyber-tag {
flex-shrink: 0;
font-family: "Courier New", monospace;
font-size: 9.5px;
letter-spacing: 0.2em;
color: rgba(0, 245, 200, 0.8);
white-space: nowrap;
overflow: hidden;
max-width: 0;
opacity: 0;
animation: div-cy-type 0.65s steps(17,end) 0.14s forwards,
div-cy-glitch 5s ease 2.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
.div-cyber-v1::before { animation: none; left: calc(50% - 11%); }
.div-cyber-bar, .div-cyber-v3::before, .div-cyber-v3::after { animation: none; }
.div-cyber-tag { animation: none; max-width: 220px; opacity: 1; }
}