{
CF
}
Code
Fronts
Back to CSS Dark Mode UI
Stealth Panel
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.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; }
<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>
Live preview
Ready