{
CF
}
Code
Fronts
Back to CSS Glassmorphism
Glass Sidebar
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gm-side-bg { position: relative; padding: 14px; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 80% 20%, #84cc16 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, #06b6d4 0%, transparent 50%), #061a14; } .gm-side { display: flex; flex-direction: column; gap: 4px; background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 12px 8px; width: 180px; } .gm-side__brand { font-size: 18px; color: #fff; text-align: center; padding: 6px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 8px; } .gm-side__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font: 500 12px system-ui, sans-serif; color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: background 0.2s, color 0.2s; } .gm-side__item span { width: 18px; text-align: center; font-size: 13px; opacity: 0.7; } .gm-side__item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .gm-side__item--active { background: rgba(255, 255, 255, 0.18); color: #fff; } .gm-side__item--active span { opacity: 1; }
<div class="gm-side-bg"> <aside class="gm-side"> <div class="gm-side__brand">✦</div> <a class="gm-side__item gm-side__item--active" href="#"><span>◫</span>Dashboard</a> <a class="gm-side__item" href="#"><span>◐</span>Projects</a> <a class="gm-side__item" href="#"><span>☰</span>Inbox</a> <a class="gm-side__item" href="#"><span>⚙</span>Settings</a> </aside> </div>
Live preview
Ready