The glass morphism navbar, a sticky nav with a translucent frosted background, is now the dominant pattern across SaaS, AI tools, and developer products. macOS, Linear, Vercel, and Apple all use some version of it. It is also one of the clearest signals of intentional design: a well-executed frosted nav communicates that the product is finished, not generated. For a complete picture of how typography, colour, and spacing choices compound with decisions like this one, see the vibe coder's design guide.
The look comes from two CSS properties: background: rgba(255,255,255,0.72) and backdrop-filter: blur(20px) saturate(180%). Together they blur and slightly oversaturate whatever is behind the nav, creating the glass effect.
The complete sticky glass navbar CSS
nav {
position: sticky;
top: 0;
z-index: 100;
height: 56px;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
Scroll state: transparent to frosted
Many hero sections start with a transparent navbar that frosts over on scroll. Add a scroll listener that toggles a class on the nav element, then use CSS to transition between states:
window.addEventListener('scroll', () => {
document.querySelector('nav').classList.toggle('scrolled', window.scrollY > 40);
});
nav { background: transparent; transition: background 0.3s; }
nav.scrolled { background: rgba(255,255,255,0.72); }
Mobile handling and Safari fallback
Always include -webkit-backdrop-filter alongside backdrop-filter. Safari requires the prefixed version. For browsers that do not support backdrop-filter, increase the background opacity to 0.9 as a fallback so the nav stays legible.
On mobile, collapse nav links behind a menu trigger. The 56px height works on all screen sizes without changes. Keep the logo and primary CTA visible at every breakpoint.
The transparent navbar template on Moon includes the full scroll-state logic out of the box. Paste it into Bolt, Replit, Claude Code, or Lovable to get a production-ready nav in seconds without writing any of this yourself.
Frequently asked questions
Does backdrop-filter work in Safari?
Yes, but you need the -webkit- prefix. Always include both backdrop-filter and -webkit-backdrop-filter. Without the prefix, the glass effect disappears in all Safari and WebKit-based browsers. The Moon navbar templates include both prefixes.
What is the difference between sticky and fixed positioning?
position: sticky moves with the page until it hits the top edge, then stays. It only works inside a scrollable parent and does not remove the element from document flow. The page content below it is not shifted up. position: fixed is always anchored to the viewport regardless of the parent, which means content below it needs top padding equal to the nav height.
How do I make the navbar transparent at the top and frosted on scroll?
Start with background: transparent and no backdrop-filter on the nav. On scroll, add a class (e.g. .scrolled) that sets background: rgba(255,255,255,0.72) and backdrop-filter: blur(20px). Use CSS transition on the nav element to animate smoothly between states at 0.25–0.3 seconds.
How do I apply a glass navbar on a dark hero background?
Change the rgba values for a dark-tinted glass: background: rgba(10,10,10,0.55). Keep the blur at 20px. Set link and logo text to white. The blur still applies to whatever is behind the nav. The dark gradient hero behind it creates an elegant layered effect.
