Cyber Terminal
Phosphor-green CRT terminal aesthetic — text and chrome share one accent color, suggesting a coherent technical voice.
The code
<div class="dm-cyber-bg">
<div class="dm-cyber">
<div class="dm-cyber__head">
<span class="dm-cyber__dot"></span>
<span>node-01.codefronts.io</span>
</div>
<div class="dm-cyber__body">
<div class="dm-cyber__line"><span class="dm-cyber__prompt">$</span> deploy --env=prod</div>
<div class="dm-cyber__line">→ Build complete in 8.42s</div>
<div class="dm-cyber__line">→ 158 pages · 0 errors</div>
<div class="dm-cyber__line">
<span class="dm-cyber__prompt">$</span> <span class="dm-cyber__cur">█</span>
</div>
</div>
</div>
</div> <div class="dm-cyber-bg">
<div class="dm-cyber">
<div class="dm-cyber__head">
<span class="dm-cyber__dot"></span>
<span>node-01.codefronts.io</span>
</div>
<div class="dm-cyber__body">
<div class="dm-cyber__line"><span class="dm-cyber__prompt">$</span> deploy --env=prod</div>
<div class="dm-cyber__line">→ Build complete in 8.42s</div>
<div class="dm-cyber__line">→ 158 pages · 0 errors</div>
<div class="dm-cyber__line">
<span class="dm-cyber__prompt">$</span> <span class="dm-cyber__cur">█</span>
</div>
</div>
</div>
</div>.dm-cyber-bg { padding: 22px; border-radius: 16px; background: #020a05; }
.dm-cyber {
background: #020a05;
border: 1px solid rgba(74, 222, 128, 0.25);
border-radius: 8px;
font-family: ui-monospace, "JetBrains Mono", monospace;
color: #4ade80;
overflow: hidden;
}
.dm-cyber__head {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: rgba(74, 222, 128, 0.06);
border-bottom: 1px solid rgba(74, 222, 128, 0.15);
font-size: 11px;
color: rgba(74, 222, 128, 0.7);
}
.dm-cyber__dot {
width: 6px; height: 6px;
background: #4ade80;
border-radius: 50%;
box-shadow: 0 0 8px #4ade80;
}
.dm-cyber__body { padding: 12px 14px; font-size: 11.5px; line-height: 1.7; }
.dm-cyber__line { color: rgba(74, 222, 128, 0.85); }
.dm-cyber__prompt { color: #86efac; font-weight: 700; margin-right: 4px; }
.dm-cyber__cur { animation: dm-cyber-blink 0.8s steps(2) infinite; }
@keyframes dm-cyber-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dm-cyber__cur { animation: none; } } .dm-cyber-bg { padding: 22px; border-radius: 16px; background: #020a05; }
.dm-cyber {
background: #020a05;
border: 1px solid rgba(74, 222, 128, 0.25);
border-radius: 8px;
font-family: ui-monospace, "JetBrains Mono", monospace;
color: #4ade80;
overflow: hidden;
}
.dm-cyber__head {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: rgba(74, 222, 128, 0.06);
border-bottom: 1px solid rgba(74, 222, 128, 0.15);
font-size: 11px;
color: rgba(74, 222, 128, 0.7);
}
.dm-cyber__dot {
width: 6px; height: 6px;
background: #4ade80;
border-radius: 50%;
box-shadow: 0 0 8px #4ade80;
}
.dm-cyber__body { padding: 12px 14px; font-size: 11.5px; line-height: 1.7; }
.dm-cyber__line { color: rgba(74, 222, 128, 0.85); }
.dm-cyber__prompt { color: #86efac; font-weight: 700; margin-right: 4px; }
.dm-cyber__cur { animation: dm-cyber-blink 0.8s steps(2) infinite; }
@keyframes dm-cyber-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dm-cyber__cur { animation: none; } }More from 12 CSS Dark Mode UI Patterns
Ember PulseOLED CardStealth PanelInkwell ModalMocha WorkstationForest DimSlate StackCarbon ShelvesOnyx LadderPhosphor CardAurora Dim
View the full collection →