Glass navigation bar

Frosted-glass navbar — backdrop-filter blur with a semi-transparent background.

Brand

HomeAboutContact

Content scrolls behind the glass navbar. The frosted effect reveals blurred colors from the background, creating depth and visual hierarchy without fully obscuring what's underneath.

Widely Supported

colorglassno-js

Quick implementation

.glass-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.75rem 1.5rem;
  background: oklch(0.15 0.02 260 / 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
}

body {
  padding-top: 3.5rem; /* offset for fixed nav */
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a navigation component.

Goal: A frosted-glass fixed navigation bar using backdrop-filter — no JavaScript.

Technical constraints:
- Use backdrop-filter: blur(12px) with -webkit- prefix for Safari.
- Semi-transparent background in oklch(): oklch(lightness chroma hue / alpha).
- Fixed position with z-index above page content.
- Subtle bottom border using oklch(1 0 0 / 0.08) for a glass edge effect.
- Add body padding-top to offset fixed nav height.

Framework variant (pick one):
A) Vanilla CSS for a semantic <nav> element.
B) React component — accept blur, opacity, and height props.

Edge cases to handle:
- Safari requires -webkit-backdrop-filter alongside backdrop-filter.
- Content behind must be visible — background alpha should be 0.5–0.7.
- On scroll, consider adding a stronger background for readability.
- Mobile: ensure the nav works with virtual keyboard and safe areas.

Return CSS.

Why this matters in 2026

Glass-morphism navigation is everywhere — macOS, iOS, and modern web apps all use frosted-glass headers. backdrop-filter: blur() creates the effect with a single CSS property. No images, no canvas — the browser composites the blur in real time.

The logic

The combination of a semi-transparent background and backdrop-filter: blur(12px) creates the glass effect. The background provides a tinted base color, while the blur smears whatever sits behind the element. A thin border-bottom with very low opacity simulates the light refraction edge of real glass.

Accessibility & performance

backdrop-filter is GPU-accelerated and runs at 60fps in all modern browsers. Ensure text contrast against the blurred background meets WCAG AA — the semi-transparent tint should be dark enough. Test with colorful backgrounds behind the nav, not just solid colors. Add -webkit-backdrop-filter for Safari compatibility.