Modern Glassmorphism Floating Sidebar Design in CSS

Here's a working CSS Sidebar Navigation Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Modern Glassmorphism Floating Sidebar Design in CSS
Source: https://codefronts.com/navigation/css-sidebar-navigation/modern-glassmorphism-floating-sidebar-design-in-css/

A smart-home control dashboard with a glassmorphic side nav and a true backdrop-blur effect. The rail floats with rounded corners over an animated ambient gradient, using backdrop-filter blur + saturation, inset highlights, and frosted hover tooltips. Matching glass stat cards (temperature, lights, energy). Vibrant, depth-driven, fully transparent layering — one of the cool modern CSS sidebar designs that proves how much identity a single rail can carry. Best for smart-home apps, modern dashboards, premium SaaS landing pages — anywhere the sidebar IS the brand visual.
## HTML
```html
<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>
```
## CSS
```css
/* ─── 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;
  }
}
```

Here's a working CSS Sidebar Navigation Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Modern Glassmorphism Floating Sidebar Design in CSS
Source: https://codefronts.com/navigation/css-sidebar-navigation/modern-glassmorphism-floating-sidebar-design-in-css/

A smart-home control dashboard with a glassmorphic side nav and a true backdrop-blur effect. The rail floats with rounded corners over an animated ambient gradient, using backdrop-filter blur + saturation, inset highlights, and frosted hover tooltips. Matching glass stat cards (temperature, lights, energy). Vibrant, depth-driven, fully transparent layering — one of the cool modern CSS sidebar designs that proves how much identity a single rail can carry. Best for smart-home apps, modern dashboards, premium SaaS landing pages — anywhere the sidebar IS the brand visual.
## HTML
```html
<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>
```
## CSS
```css
/* ─── 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;
  }
}
```