Glass Sidebar
Vertical glass sidebar with active-item highlight — the classic dashboard chrome reimagined as a single semi-transparent panel.
The code
<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> <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>.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; } .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; }