Back to Snippets

Apple Style Glassmorphism Navbar CSS

A dark navigation bar that stays at the top of the page and blurs whatever scrolls beneath it. There is no JavaScript, so it works the moment the CSS loads.

The frost is backdrop-filter with a blur and a saturate boost. The saturate value is what stops the blurred content looking washed out, since blurring on its own drains color. A translucent background sits over the filter, and the bar needs that partial transparency or there is nothing for the filter to reveal.

Positioning is sticky rather than fixed, so the bar keeps its place in the document flow and the content below does not jump up under it. Safari needs the webkit prefixed copy of the filter, which is included. Where backdrop-filter is unsupported the bar degrades to a plain translucent panel rather than breaking.

574

#css

#navbar

#navigation

#glassmorphism

#sticky

#apple style

#header

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #0f172a;
  color: #f8fafc;
  min-height: 200vh;
}

.glass-navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  z-index: 1000;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  cursor: pointer;
}

.nav-links {
  display: flex;
  gap: 32px;
}

.nav-item {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.nav-item:hover {
  color: #ffffff;
}

.nav-actions {
  display: flex;
  gap: 16px;
}

.icon-btn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: color 0.2s ease;
}

.icon-btn:hover {
  color: #ffffff;
}

.content-spacer {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.content-spacer h1 {
  font-size: 4rem;
  margin: 0 0 10px 0;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.content-spacer p {
  font-size: 1.25rem;
  color: #e2e8f0;
  max-width: 500px;
}

<nav class="glass-navbar">
  <div class="nav-brand">
    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#f8fafc" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
    <span>Nexus</span>
  </div>
  
  <div class="nav-links">
    <a href="#" class="nav-item">Mac</a>
    <a href="#" class="nav-item">iPad</a>
    <a href="#" class="nav-item">iPhone</a>
    <a href="#" class="nav-item">Watch</a>
    <a href="#" class="nav-item">Support</a>
  </div>
  
  <div class="nav-actions">
    <button class="icon-btn">
      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
    </button>
    <button class="icon-btn">
      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
    </button>
  </div>
</nav>

<div class="content-spacer">
  <h1>Scroll Down</h1>
  <p>The navigation bar remains fixed and applies a beautiful blur to the content passing underneath it.</p>
</div>

Apple Style Glassmorphism Navbar CSS

Share Code Snippet