Glass Sidebar — Playground

{CF} CodeFronts Back to CSS Glassmorphism Glass Sidebar Pure CSS

Edit any tab — preview updates live

.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; }

Live preview Ready