Glass Navbar — Playground

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

Edit any tab — preview updates live

.gm-nav-bg {
  position: relative; padding: 8px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 25% 50%, #6366f1 0%, transparent 50%),
    radial-gradient(circle at 75% 50%, #ec4899 0%, transparent 50%),
    #1a1426;
}
.gm-nav {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 6px 10px;
}
.gm-nav__logo {
  font: 700 13px system-ui, sans-serif;
  color: #fff; margin-right: 12px;
}
.gm-nav__link {
  font: 500 12px system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 6px 12px; border-radius: 7px;
  transition: background 0.2s, color 0.2s;
}
.gm-nav__link:hover {
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
.gm-nav__link--active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.gm-nav__cta {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 6px 14px; border-radius: 7px;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
}
.gm-nav__cta:hover { background: rgba(255, 255, 255, 0.32); }

Live preview Ready