A whisper of glass — just enough blur and tint to separate layers without drawing attention. Ideal for navigation bars, floating toolbars, or any surface where the glass shouldn’t steal focus.

Sticky navbar with Tailwind

<header class="glass-subtle sticky top-0 z-50 border-b border-white/10">
  <nav class="mx-auto max-w-7xl flex items-center justify-between
              px-6 py-3">
    <span class="text-lg font-bold text-white">Brand</span>
    <div class="flex items-center gap-6">
      <a class="text-sm text-white/70 hover:text-white
                transition-colors" href="#">Features</a>
      <a class="text-sm text-white/70 hover:text-white
                transition-colors" href="#">Pricing</a>
      <button class="rounded-lg bg-white/10 px-4 py-2 text-sm
                     text-white hover:bg-white/20
                     transition-colors">Sign in</button>
    </div>
  </nav>
</header>

Customization

.my-toolbar {
  --glass-blur: 16px;     /* More blur */
  --glass-opacity: 0.1;   /* Slightly more visible */
}