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); }
Dark mode glass morphism
For a dark-themed navbar, change the rgba values to a dark tint: background: rgba(10, 10, 10, 0.55). Keep the blur at 20px. Set logo and link text to white. The blur still applies to whatever is behind the nav, so a gradient hero behind a dark glass nav creates a layered effect that reads as premium.
If you are using a dark mode template, test the glass effect against both light and dark hero backgrounds. A glass nav that looks correct over a dark gradient may become unreadable over a light section if the background opacity is too low. The safe range for a dark glass nav is 0.5 to 0.65 opacity, which provides enough contrast over most backgrounds while still showing the blur effect.
Border and shadow on the frosted nav
A common finishing touch is a thin border at the bottom of the nav that appears only in the scrolled state. This adds definition without cluttering the transparent state:
nav { border-bottom: 1px solid transparent; }
nav.scrolled { border-bottom: 1px solid rgba(0,0,0,0.06); }
Some products add a subtle box-shadow instead: box-shadow: 0 1px 3px rgba(0,0,0,0.04). Either approach works. Avoid combining both, which doubles the visual weight and makes the nav feel heavy. One delimiter is enough.
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 at all, increase the background opacity to 0.9 as a fallback so the nav stays legible against any content behind it.
On mobile, collapse nav links behind a hamburger menu trigger. The 56px height works on all screen sizes without changes. Keep the logo and primary CTA visible at every breakpoint. The hamburger icon should appear below 768px and toggle a full-width dropdown with links stacked vertically at 44px minimum height for easy tapping.
For a full walkthrough on building responsive websites, see our step-by-step guides on building a website with AI.
Why AI code generators get the navbar wrong
Vibe coding tools like Bolt, Lovable, and Claude Code generate navbars, but the default output almost always uses a solid background instead of a frosted one. The model does not include backdrop-filter because it is a less common CSS property in its training data compared to background-color. The scroll-state transition is also usually missing.
The fastest fix is to skip the prompt entirely and paste a template that already has the glass effect built in. The transparent navbar template on Moon includes the full frosted effect, the scroll-state JavaScript, the mobile hamburger menu, and the Safari fallback. Paste it into Bolt, Replit, Claude Code, or Lovable and the AI inherits the correct CSS without needing to generate it from scratch.
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.
