{
CF
}
Code
Fronts
Back to CSS Dark Mode UI
Forest Dim
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.dm-forest-bg { padding: 24px; border-radius: 16px; background: #0a1612; } .dm-forest { background: #0e1f1a; border: 1px solid #1a3329; border-radius: 10px; padding: 6px; } .dm-forest__row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 7px; transition: background 0.18s; } .dm-forest__row:hover { background: rgba(143, 179, 163, 0.07); } .dm-forest__row + .dm-forest__row { border-top: 1px solid #1a3329; margin-top: 4px; padding-top: 16px; } .dm-forest__icon { width: 28px; height: 28px; background: rgba(143, 179, 163, 0.12); color: #8fb3a3; border-radius: 50%; display: grid; place-items: center; font-size: 13px; flex-shrink: 0; } .dm-forest__body { display: flex; flex-direction: column; gap: 2px; } .dm-forest__body b { font: 600 12px system-ui, sans-serif; color: #d6e6dd; } .dm-forest__body span { font: 11px system-ui, sans-serif; color: #8fb3a3; }
<div class="dm-forest-bg"> <div class="dm-forest"> <div class="dm-forest__row"> <span class="dm-forest__icon">◉</span> <div class="dm-forest__body"> <b>Garden updates</b> <span>3 plants ready to harvest</span> </div> </div> <div class="dm-forest__row"> <span class="dm-forest__icon">◐</span> <div class="dm-forest__body"> <b>Soil moisture</b> <span>Below threshold — water soon</span> </div> </div> </div> </div>
Live preview
Ready