Frosted glass
A translucent pane over slowly moving color.
Glass Navbar
A frosted pill navbar floating over a hero with drifting color. A glass highlight slides to whichever link you hover, driven by :has(), and settles back on the current page.
Also known as: glassmorphism navbar css, frosted glass navbar, glass header css.
HTML
<div class="gls-glass-navbar">
<span class="gls-glass-navbar-orb gls-glass-navbar-orb-a" aria-hidden="true"></span>
<span class="gls-glass-navbar-orb gls-glass-navbar-orb-b" aria-hidden="true"></span>
<nav class="gls-glass-navbar-bar" aria-label="Main">
<a class="gls-glass-navbar-logo" href="#"><span class="gls-glass-navbar-mark" aria-hidden="true"></span>Lumen</a>
<div class="gls-glass-navbar-links">
<span class="gls-glass-navbar-pill" aria-hidden="true"></span>
<a class="gls-glass-navbar-link" href="#" aria-current="page">Home</a>
<a class="gls-glass-navbar-link" href="#">Work</a>
<a class="gls-glass-navbar-link" href="#">Pricing</a>
</div>
<a class="gls-glass-navbar-cta" href="#">Sign up</a>
</nav>
<div class="gls-glass-navbar-hero">
<p class="gls-glass-navbar-heading">Design in glass</p>
<p class="gls-glass-navbar-sub">The bar blurs the page as color drifts beneath it.</p>
</div>
</div>CSS
.gls-glass-navbar {
--c: var(--gls-color, #3b82f6);
font-size: var(--gls-size, 16px);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 22em;
height: 12em;
border-radius: 1.25em;
overflow: hidden;
isolation: isolate;
background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #0f172a), color-mix(in srgb, var(--c) 30%, #4c1d95));
color: #fff;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.3;
}
.gls-glass-navbar-orb {
position: absolute;
z-index: -1;
border-radius: 50%;
}
.gls-glass-navbar-orb-a {
left: -1em;
top: -2.5em;
width: 7em;
height: 7em;
background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--c) 35%, #fff), var(--c) 70%);
animation: gls-glass-navbar-drift-a 8s ease-in-out infinite alternate;
}
.gls-glass-navbar-orb-b {
right: -0.5em;
top: -1.5em;
width: 6em;
height: 6em;
background: radial-gradient(circle at 40% 40%, #fde68a, #f472b6 70%);
animation: gls-glass-navbar-drift-b 9s ease-in-out infinite alternate;
}
.gls-glass-navbar-bar {
display: flex;
align-items: center;
gap: 0.6em;
margin-top: 0.8em;
padding: 0.3em 0.3em 0.3em 0.8em;
border-radius: 99em;
background: color-mix(in srgb, #fff 14%, transparent);
-webkit-backdrop-filter: blur(0.9em) saturate(1.5);
backdrop-filter: blur(0.9em) saturate(1.5);
border: 1px solid color-mix(in srgb, #fff 45%, transparent);
box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
font-size: 0.76em;
}
.gls-glass-navbar-bar a { color: inherit; text-decoration: none; }
.gls-glass-navbar-logo {
display: flex;
align-items: center;
gap: 0.4em;
margin-right: 0.3em;
font-weight: 750;
}
.gls-glass-navbar-mark {
width: 1.1em;
height: 1.1em;
border-radius: 50%;
background: conic-gradient(from 200deg, var(--c), #f472b6, #fde68a, var(--c));
}
.gls-glass-navbar-links {
position: relative;
display: flex;
}
.gls-glass-navbar-link {
position: relative;
width: 4em;
padding: 0.5em 0;
border-radius: 99em;
text-align: center;
font-weight: 550;
opacity: 0.85;
transition: opacity 0.25s ease;
}
.gls-glass-navbar-link:hover,
.gls-glass-navbar-link[aria-current="page"] { opacity: 1; }
.gls-glass-navbar-link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.gls-glass-navbar-pill {
position: absolute;
inset: 0 auto 0 0;
width: 4em;
border-radius: 99em;
background: rgb(255 255 255 / 0.2);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0.2em 0.5em -0.2em rgb(0 0 0 / 0.3);
transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.gls-glass-navbar-links:has(.gls-glass-navbar-link:nth-of-type(2):hover) .gls-glass-navbar-pill { transform: translateX(4em); }
.gls-glass-navbar-links:has(.gls-glass-navbar-link:nth-of-type(3):hover) .gls-glass-navbar-pill { transform: translateX(8em); }
.gls-glass-navbar-bar .gls-glass-navbar-cta {
margin-left: 0.2em;
padding: 0.5em 0.95em;
border-radius: 99em;
background: #fff;
color: color-mix(in srgb, var(--c) 70%, #0f172a);
font-weight: 650;
transition: transform 0.25s ease;
}
.gls-glass-navbar-bar .gls-glass-navbar-cta:hover { transform: scale(1.05); }
.gls-glass-navbar-hero {
margin: auto 0;
text-align: center;
}
.gls-glass-navbar-heading {
margin: 0;
font-size: 1.7em;
font-weight: 800;
letter-spacing: -0.02em;
}
.gls-glass-navbar-sub {
margin: 0.35em 0 0;
font-size: 0.75em;
color: rgb(255 255 255 / 0.75);
}
@keyframes gls-glass-navbar-drift-a {
to { transform: translate(9em, 0.8em); }
}
@keyframes gls-glass-navbar-drift-b {
to { transform: translate(-10em, 1em) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.gls-glass-navbar, .gls-glass-navbar *, .gls-glass-navbar::before, .gls-glass-navbar::after, .gls-glass-navbar *::before, .gls-glass-navbar *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--gls-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--gls-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.