{
CF
}
Code
Fronts
Back to CSS Dark Mode UI
OLED Card
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.dm-oled-bg { padding: 28px; border-radius: 16px; background: #000; } .dm-oled { background: #000; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 18px 20px; color: #ededed; } .dm-oled__tag { display: inline-block; background: transparent; color: #4ade80; border: 1px solid #4ade80; padding: 2px 8px; border-radius: 4px; font: 700 9px ui-monospace, monospace; letter-spacing: 0.12em; margin-bottom: 12px; } .dm-oled__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; color: #fff; } .dm-oled__body { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); } .dm-oled__btn { background: none; border: none; color: #4ade80; padding: 0; font: 600 12px system-ui, sans-serif; cursor: pointer; transition: color 0.2s; } .dm-oled__btn:hover { color: #86efac; }
<div class="dm-oled-bg"> <article class="dm-oled"> <span class="dm-oled__tag">NEW</span> <h3 class="dm-oled__title">Battery saver</h3> <p class="dm-oled__body">Pure-black surfaces save up to 60% on OLED screens.</p> <button class="dm-oled__btn">Learn more →</button> </article> </div>
Live preview
Ready