15 CSS Navigation Menu Designs 10 / 15

CSS Navigation with Glassmorphism Effect

A stunning glassmorphism navigation bar with frosted glass effect, floating gradient orbs in the background, and animated blob shapes.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="nav-10">
  <div class="nav-10__orb"></div>
  <div class="nav-10__orb"></div>
  <div class="nav-10__orb"></div>
  <nav class="nav-10__bar" role="navigation">
    <div class="nav-10__logo">
      <span class="nav-10__logo-glyph">
        <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
      </span>
      Prism
    </div>
    <ul class="nav-10__links">
      <li><a href="#" class="nav-10__active">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    <div class="nav-10__actions">
      <a href="#" class="nav-10__btn-out">Log in</a>
      <a href="#" class="nav-10__btn-in">Sign up free</a>
    </div>
  </nav>
  <div class="nav-10__hero">
    <div class="nav-10__card">
      <h1>Design <span>through glass</span></h1>
      <p>The navbar and card use <code>backdrop-filter: blur()</code> for frosted glass. Animated radial-gradient orbs behind create depth. Pure CSS with no images.</p>
      <a href="#" class="nav-10__card-btn">
        Explore →
      </a>
      <div class="nav-10__stats">
        <div class="nav-10__stat-pill"><b>backdrop-filter</b> blur</div>
        <div class="nav-10__stat-pill"><b>rgba</b> transparency</div>
        <div class="nav-10__stat-pill">CSS <b>animations</b></div>
      </div>
    </div>
  </div>
</div>
.nav-10,.nav-10 *,.nav-10 *::before,.nav-10 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-10 ::selection{background:#6366f1;color:#fff}
.nav-10{
  --text:#fff;--muted:rgba(255,255,255,.65);
  --glass:rgba(255,255,255,.1);--glass-border:rgba(255,255,255,.18);
  --accent:#a5b4fc;
  font-family:'Nunito',system-ui,sans-serif;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 20% 50%, #3730a3 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, #7e22ce 0%, transparent 45%),
    radial-gradient(ellipse at 60% 90%, #1d4ed8 0%, transparent 45%),
    #0a0a1a;
  position:relative;overflow:hidden;
}
/* animated bg orbs */
.nav-10__orb{
  position:absolute;border-radius:50%;
  filter:blur(60px);opacity:.45;
  animation:nav-10-drift 12s ease-in-out infinite alternate;
}
.nav-10__orb:nth-child(1){width:400px;height:400px;background:#6366f1;top:-100px;left:-100px}
.nav-10__orb:nth-child(2){width:350px;height:350px;background:#7c3aed;bottom:-80px;right:10%;animation-delay:-4s;animation-duration:15s}
.nav-10__orb:nth-child(3){width:280px;height:280px;background:#2563eb;top:40%;left:60%;animation-delay:-8s;animation-duration:10s}
@keyframes nav-10-drift{0%{transform:translate(0,0)}100%{transform:translate(30px,20px)}}

/* glass navbar */
.nav-10__bar{
  position:sticky;top:20px;z-index:100;
  margin:20px 40px 0;
  background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}
.nav-10__logo{
  font-size:1.2rem;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;letter-spacing:-.02em;
}
.nav-10__logo-glyph{
  width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,.15);border:1px solid var(--glass-border);
  display:grid;place-items:center;
}
.nav-10__logo-glyph svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.nav-10__links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-10__links a{
  padding:8px 14px;color:var(--muted);text-decoration:none;
  font-size:.875rem;font-weight:600;border-radius:12px;
  transition:background .2s,color .2s;
}
.nav-10__links a:hover{background:var(--glass);color:var(--text)}
.nav-10__links a.nav-10__active{background:rgba(255,255,255,.12);color:var(--text)}

.nav-10__actions{display:flex;align-items:center;gap:8px}
.nav-10__btn-out{
  padding:7px 16px;border-radius:12px;font-size:.875rem;font-weight:600;
  color:var(--text);background:transparent;border:1px solid var(--glass-border);
  text-decoration:none;transition:background .2s;cursor:pointer;
}
.nav-10__btn-out:hover{background:var(--glass)}
.nav-10__btn-in{
  padding:7px 16px;border-radius:12px;font-size:.875rem;font-weight:600;
  color:#fff;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  text-decoration:none;transition:background .2s;cursor:pointer;
}
.nav-10__btn-in:hover{background:rgba(255,255,255,.22)}

/* floating glass card */
.nav-10__hero{
  position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:80px 24px;text-align:center;
  min-height:80vh;
}
.nav-10__card{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;padding:48px 52px;
  max-width:580px;
  box-shadow:0 20px 60px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);
}
.nav-10__card h1{
  font-size:clamp(2rem,5vw,3.25rem);font-weight:700;
  color:#fff;letter-spacing:-.04em;line-height:1.15;
  margin-bottom:16px;
}
.nav-10__card h1 span{
  background:linear-gradient(135deg,#a5b4fc,#c4b5fd);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-10__card p{font-size:1rem;color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:28px}
.nav-10__card-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:14px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:.9375rem;font-weight:700;text-decoration:none;
  transition:background .2s,box-shadow .2s;
  backdrop-filter:blur(8px);
}
.nav-10__card-btn:hover{background:rgba(255,255,255,.2);box-shadow:0 4px 20px rgba(0,0,0,.2)}

/* small glass pills */
.nav-10__stats{
  display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center;
}
.nav-10__stat-pill{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:100px;padding:8px 18px;
  font-size:.8rem;font-weight:600;color:rgba(255,255,255,.7);
}
.nav-10__stat-pill b{color:#fff}

@media(max-width:600px){
  .nav-10__bar{margin:12px 16px 0;border-radius:16px}
  .nav-10__links,.nav-10__btn-out{display:none}
  .nav-10__card{padding:32px 24px}
}
@media(prefers-reduced-motion:reduce){
  .nav-10__orb{animation:none}
  .nav-10__links a,.nav-10__btn-out,.nav-10__btn-in,.nav-10__card-btn{transition:none}
}

How this works

The nav background uses `backdrop-filter: blur(20px)` with `background: rgba(255,255,255,0.1)` for the glass effect. Animated orbs are absolutely-positioned `
` elements with radial-gradient backgrounds and CSS keyframe animations for floating movement. A subtle `border: 1px solid rgba(255,255,255,0.2)` adds the glass edge.

Customize

  • Change orb colors by modifying the `radial-gradient` stops. Increase `blur(20px)` for stronger frost. Add `saturate(180%)` to the `backdrop-filter` for a colored glass effect. The orb animation speed is controlled by `animation-duration` on each `.nav-10__orb`.

Watch out for

  • `backdrop-filter` only blurs what is rendered *behind* the element in the stacking context. It requires `background` to not be fully opaque — a fully opaque background covers the blur. Safari requires `-webkit-backdrop-filter` as a fallback.

Browser support

ChromeSafariFirefoxEdge
all modern all modern all modern all modern

More from 15 CSS Navigation Menu Designs

CSS Breadcrumb NavigationCSS Animated Navigation Icons with LabelsCSS Multi-Level Accordion NavigationCSS Neon Glow Navigation MenuCSS Morphing Navigation Pill IndicatorCSS Sticky Navigation Bar with Scroll ShrinkCSS Navigation with Magnetic Hover EffectCSS Horizontal Navigation Bar with Hover UnderlineCSS Dropdown Navigation MenuCSS Mega Menu NavigationCSS Hamburger Menu with Slide-Out DrawerCSS Full-Screen Overlay Navigation
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →