Glass Navbar
Sticky navbar that stays translucent over any page background — backdrop-filter saturate boosts the colors behind to keep contrast.
The code
<div class="gm-nav-bg">
<nav class="gm-nav">
<span class="gm-nav__logo">✦ Brand</span>
<a class="gm-nav__link gm-nav__link--active" href="#">Home</a>
<a class="gm-nav__link" href="#">Features</a>
<a class="gm-nav__link" href="#">Pricing</a>
<button class="gm-nav__cta">Sign in</button>
</nav>
</div> <div class="gm-nav-bg">
<nav class="gm-nav">
<span class="gm-nav__logo">✦ Brand</span>
<a class="gm-nav__link gm-nav__link--active" href="#">Home</a>
<a class="gm-nav__link" href="#">Features</a>
<a class="gm-nav__link" href="#">Pricing</a>
<button class="gm-nav__cta">Sign in</button>
</nav>
</div>.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); } .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); }