About this snippet

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.

Size
3.0 KB
Uses
HTML, CSS
Loads
Nothing external
Views
668

Collections

Related snippets

<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>
*, *::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;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save