Floating glassmorphism capsule nav

Open preview

Overview

The glass navbar encodes a design philosophy: the header should never be the main event. Softly translating the content beneath it, it floats above the page without pushing the content down.

Why it works

A solid opaque header acts as a wall when scrolling — the content has to flow around it. A glass nav optically translates what’s underneath, so the header is more like a reading lens than a ceiling. If your product’s world already lives in the hero and section backgrounds, this style preserves that world instead of paving over it.

Structure

• Pill shape: border-radius: 999px reads as “floating” far more than square corners do.
• backdrop-filter: blur 18px with saturate 160% is the baseline. Bumping saturate slightly makes the glass feel like it has depth.
• Inner highlight: a 1px white inset on the top edge gives the “rim of glass” look.
• Center nav + right cluster: the industry-standard shape. Below ~720px, collapse the center into a burger and drop the ghost button.
• Gradient primary CTA: indigo→purple keeps a single color lead inside the nav. If every button is colored, none of them is.

When to use

• When you need a modern, not-dated header for a SaaS or product marketing site in minimal time
• When the hero and section backgrounds are colorful and the header must stay out of their way
• When the header should hold presence while scrolling, but not add visual weight

Recommended stack

Category

Navigation

Styles

Glassmorphism / Soft / Gradient / SaaS / Cool

Audience

for SaaS

SPA

No

Hosting

any

Notes

Looks correct on backdrop-filter-capable browsers (Chromium / Safari / modern Firefox). Falls back cleanly to a translucent white nav elsewhere.

AI prompt

Build a sticky capsule-shaped "glassmorphism" navbar for a modern SaaS site.
Page canvas:
- Soft pastel background built from three radial gradients (lavender top-left,
  pink top-right, mint bottom-center) over an off-white base (#f5f5f9).
- Some decorative gradient thumbnails behind the nav so the glass effect
  is actually visible.
Navbar:
- Position: sticky, 1rem from the top, max-width 1120px, horizontal margin auto.
- Rounded pill (border-radius: 999px), padding 0.6rem 0.75rem 0.6rem 1.1rem.
- Background: rgba(255,255,255,0.55), backdrop-filter: blur(18px) saturate(160%).
- 1px inner highlight (inset 0 1px 0 rgba(255,255,255,0.9)) and a soft
  drop shadow (0 10px 40px -10px rgba(25,30,80,0.18)).
Contents (left → right):
1. Brand: small conic-gradient square mark + bold wordmark.
2. Center nav ul: 5 pill links; the active one has a tinted blue background
   and colored text.
3. Right cluster: ghost "Sign in" link + gradient primary "Start free" button
   (linear-gradient 135deg, #5a6cff → #9f6bff, white text, rounded pill).
Behavior:
- Below 720px: hide the center ul, hide the ghost link, show a burger
  icon at the right edge.
- Primary button has subtle translateY(-1px) on hover with deeper shadow.
Interactions are pure CSS; JS only needed to toggle a mobile sheet.

Swap the palette:
- Canvas: near-black (#0b0c14) with low-opacity indigo/purple radial accents.
- Nav background: rgba(20, 22, 36, 0.55), inner highlight at the top,
  shadow deeper and slightly purple-tinted.
- Active link: rgba(159, 107, 255, 0.22) background with lilac text.
- Primary button gradient stays, text stays white.

Replace the right cluster with: search input + cart icon with badge + login.
Add a secondary thin row under the nav containing category pills
(Women / Men / Kids / Sale) that also uses the same glass style
but is not sticky.

FAQ