10 CSS Sidebar Navigation 08 / 10

Modern Glassmorphism Floating Sidebar Design in CSS

A smart-home control dashboard with a glassmorphic side nav and a true backdrop-blur effect.

Best forsmart-home apps, modern dashboards, premium SaaS landing pages — anywhere the sidebar IS the brand visual.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="sn-gls" aria-label="Glassmorphism floating sidebar demo">
  <div class="layout">
    <nav class="sidebar" aria-label="Smart-home navigation">
      <div class="logo" aria-hidden="true">❋</div>
      <a class="nav-icon active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg><span class="tip">Home</span></a>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/></svg><span class="tip">Lighting</span></a>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M14 4v10.5a4 4 0 11-4 0V4a2 2 0 014 0z"/></svg><span class="tip">Climate</span></a>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg><span class="tip">Security</span></a>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18V5l12-2v13"/><path d="M9 9h12"/></svg><span class="tip">Media</span></a>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M3 12h18M3 6h18M3 18h18"/></svg><span class="tip">Scenes</span></a>
      <div class="spacer"></div>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg><span class="tip">Settings</span></a>
      <div class="avatar" aria-hidden="true"></div>
    </nav>
    <main class="contentpane">
      <div class="hello">
        <h1>Good evening, Ada</h1>
        <p>A frosted glass rail floats above an ambient gradient — pure CSS backdrop-filter.</p>
      </div>
      <div class="cards">
        <div class="gcard">
          <div class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14 4v10.5a4 4 0 11-4 0V4a2 2 0 014 0z"/></svg></div>
          <b>Living Room</b><div class="v">21.5°</div><small>Heating · auto</small>
        </div>
        <div class="gcard">
          <div class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2"/></svg></div>
          <b>Lights</b><small>4 of 6 on</small><div class="toggleui" aria-hidden="true"></div>
        </div>
        <div class="gcard">
          <div class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M13 2L3 14h9l-1 8 10-12h-9z"/></svg></div>
          <b>Energy Today</b><div class="v">8.2 kWh</div><small>−12% vs avg</small>
        </div>
      </div>
    </main>
  </div>
</section>
/* ─── 08 Glassmorphism Floating Sidebar — smart home ──────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

.sn-gls {
  --sn-gls-txt: #f4f6ff;
  --sn-gls-muted: rgba(244,246,255,.6);
  --sn-gls-glass: rgba(255,255,255,.1);
  --sn-gls-glass-brd: rgba(255,255,255,.22);
  --sn-gls-active: rgba(255,255,255,.9);

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Sora', sans-serif;
  color: var(--sn-gls-txt);
  background:
    radial-gradient(700px 700px at 8% 12%, #7c5cff 0%, transparent 55%),
    radial-gradient(900px 700px at 95% 20%, #ff5ca8 0%, transparent 50%),
    radial-gradient(800px 800px at 70% 100%, #2bd9c9 0%, transparent 55%),
    #14102b;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-gls *, .sn-gls *::before, .sn-gls *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-gls::before {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, #ffb347, transparent 65%);
  top: 30%; left: 40%;
  filter: blur(40px); opacity: .4;
  animation: sn-gls-float 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sn-gls-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -50px); } }

.sn-gls .layout { display: flex; height: 100%; padding: 22px; position: relative; z-index: 1; }

.sn-gls .sidebar {
  width: 96px;
  background: var(--sn-gls-glass);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--sn-gls-glass-brd);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3);
  display: flex; flex-direction: column; align-items: center;
  padding: 1.4rem 0; gap: .6rem;
  flex-shrink: 0;
}
.sn-gls .logo { width: 48px; height: 48px; border-radius: 16px;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,.6));
  display: grid; place-items: center; color: #14102b; font-weight: 800; font-size: 1.4rem;
  margin-bottom: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); flex-shrink: 0; }

.sn-gls .nav-icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: var(--sn-gls-txt); text-decoration: none; position: relative; transition: .25s;
  flex-shrink: 0;
}
.sn-gls .nav-icon svg { width: 23px; height: 23px; stroke-width: 1.8; }
.sn-gls .nav-icon:hover { background: rgba(255,255,255,.14); }
.sn-gls .nav-icon.active { background: var(--sn-gls-active); color: #14102b; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.sn-gls .nav-icon .tip { position: absolute; left: 64px; top: 50%; transform: translateY(-50%) scale(.85);
  background: rgba(20,16,43,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .76rem;
  padding: .35rem .7rem; border-radius: 9px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .2s;
  border: 1px solid var(--sn-gls-glass-brd); z-index: 5; }
.sn-gls .nav-icon:hover .tip { opacity: 1; transform: translateY(-50%) scale(1); }
.sn-gls .spacer { flex: 1; }
.sn-gls .avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--sn-gls-glass-brd);
  background: linear-gradient(135deg, #ff5ca8, #7c5cff); flex-shrink: 0; }

.sn-gls .contentpane { flex: 1; padding: 1.4rem 2rem; min-width: 0; overflow-y: auto; }
.sn-gls .hello h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.sn-gls .hello p { color: var(--sn-gls-muted); margin-top: .3rem; }
.sn-gls .cards { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem; max-width: 720px; }
.sn-gls .gcard {
  background: var(--sn-gls-glass); backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--sn-gls-glass-brd); border-radius: 22px; padding: 1.4rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.25);
}
.sn-gls .gcard .ic { width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.16);
  display: grid; place-items: center; margin-bottom: 1rem; }
.sn-gls .gcard .ic svg { width: 21px; height: 21px; stroke: #fff; }
.sn-gls .gcard b { font-size: 1.05rem; font-weight: 600; }
.sn-gls .gcard .v { font-size: 1.9rem; font-weight: 800; margin-top: .5rem; letter-spacing: -.02em; }
.sn-gls .gcard small { color: var(--sn-gls-muted); font-size: .8rem; }
.sn-gls .toggleui { margin-top: .9rem; width: 46px; height: 26px; border-radius: 20px; background: rgba(255,255,255,.9); position: relative; }
.sn-gls .toggleui::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: #14102b; top: 3px; right: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sn-gls::before { animation: none; }
  .sn-gls .nav-icon, .sn-gls .nav-icon .tip { transition: none; }
}

More from 10 CSS Sidebar Navigation

Multi-Level Vertical Sidebar Menu Template in HTML/CSSPure CSS Accordion Sidebar for Admin DashboardsFixed Full-Height CSS Sidebar Navigation LayoutResponsive Off-Canvas Mobile Sidebar Navigation OverlayApp-Style Vertical Sidebar Menu with Bottom-Pinned ProfilePure CSS Collapsible Sidebar Navigation SnippetResponsive Sidebar Toggle with HTML and CSSLight & Flexible CSS Vertical Rail Menu (Collapsible)Responsive Dashboard Sidebar Navigation with Submenus
View the full collection →

Search CodeFronts

Loading…

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