Stealth Panel
Surfaces hide behind a near-black background — only the active control reveals itself with a hairline stroke.
The code
<div class="dm-stealth-bg">
<div class="dm-stealth">
<div class="dm-stealth__row">
<span class="dm-stealth__lbl">Status</span>
<span class="dm-stealth__val dm-stealth__val--ok">OPERATIONAL</span>
</div>
<div class="dm-stealth__row">
<span class="dm-stealth__lbl">Latency</span>
<span class="dm-stealth__val">42 ms</span>
</div>
<div class="dm-stealth__row">
<span class="dm-stealth__lbl">Region</span>
<span class="dm-stealth__val">us-east-1</span>
</div>
</div>
</div> <div class="dm-stealth-bg">
<div class="dm-stealth">
<div class="dm-stealth__row">
<span class="dm-stealth__lbl">Status</span>
<span class="dm-stealth__val dm-stealth__val--ok">OPERATIONAL</span>
</div>
<div class="dm-stealth__row">
<span class="dm-stealth__lbl">Latency</span>
<span class="dm-stealth__val">42 ms</span>
</div>
<div class="dm-stealth__row">
<span class="dm-stealth__lbl">Region</span>
<span class="dm-stealth__val">us-east-1</span>
</div>
</div>
</div>.dm-stealth-bg { padding: 28px; border-radius: 16px; background: #050505; }
.dm-stealth {
background: #050505;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 10px;
padding: 8px;
}
.dm-stealth__row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px;
border-radius: 6px;
transition: background 0.15s;
}
.dm-stealth__row:hover {
background: rgba(255, 255, 255, 0.03);
}
.dm-stealth__row + .dm-stealth__row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.dm-stealth__lbl {
font: 500 11px ui-monospace, monospace;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.08em; text-transform: uppercase;
}
.dm-stealth__val {
font: 600 12px ui-monospace, monospace;
color: rgba(255, 255, 255, 0.85);
}
.dm-stealth__val--ok { color: #4ade80; } .dm-stealth-bg { padding: 28px; border-radius: 16px; background: #050505; }
.dm-stealth {
background: #050505;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 10px;
padding: 8px;
}
.dm-stealth__row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px;
border-radius: 6px;
transition: background 0.15s;
}
.dm-stealth__row:hover {
background: rgba(255, 255, 255, 0.03);
}
.dm-stealth__row + .dm-stealth__row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.dm-stealth__lbl {
font: 500 11px ui-monospace, monospace;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.08em; text-transform: uppercase;
}
.dm-stealth__val {
font: 600 12px ui-monospace, monospace;
color: rgba(255, 255, 255, 0.85);
}
.dm-stealth__val--ok { color: #4ade80; }More from 12 CSS Dark Mode UI Patterns
Onyx LadderPhosphor CardAurora DimEmber PulseOLED CardInkwell ModalCyber TerminalMocha WorkstationForest DimSlate StackCarbon Shelves
View the full collection →