30 CSS Sidebar Layouts
30 / 30

All 30 in 30 CSS Sidebar Layouts

  1. 01Modern SaaS Dashboard Sidebar Menu with Native Dark Mode Switch
  2. 02Accessible Admin Panel Sidebar with CSS Tooltips and Icon Collapse
  3. 03Developer Documentation Sidebar with Scroll-Synced Nesting
  4. 04Mobile-First Responsive Sidebar to Bottom Navigation Switch Layout
  5. 05Data Analytics Sidebar Layout with CSS Subgrid Alignment
  6. 06Smooth Animated Collapsible Sidebar Menu with Icon-Only Mode
  7. 07CSS Position Sticky Sidebar Layout for E-Commerce and Blogs
  8. 08Pure CSS Collapsible Sidebar Drawer Menu without JavaScript
  9. 09CSS Fixed Sidebar Layout with Independent Scrollable Main Content
  10. 10Off-Canvas Navigation Drawer for Mobile & Desktop Web Apps
  11. 11Right-Aligned CSS Sidebar Layout for Secondary Tool Panels
  12. 12Two-Pane Webmail UI Layout with CSS Flexbox & Grid
  13. 13Dual Sidebar App Shell Layout with Left Nav and Right Context Panel
  14. 14Compact Mini Icon Rail Sidebar Navigation for SaaS Web Apps
  15. 15Responsive E-Commerce Product Filter Sidebar with Native Accordion Menu
  16. 16Modern Floating Glassmorphism Sidebar UI Component
  17. 17CSS Sidebar Menu with Sticky User Profile Footer
  18. 18Push Content Sidebar Navigation Layout with Smooth CSS Transitions
  19. 19Off-Canvas Sidebar Overlay Layout with Blur Backdrop
  20. 20Persistent Collapsible State Sidebar with CSS Variables
  21. 21App Sidebar Navigation with Integrated Sticky Search Bar
  22. 22Section-Grouped Sidebar Navigation Menu with Header Labels
  23. 23CSS Target Active Indicator Sidebar Menu without JavaScript
  24. 24Multi-Level Nested Tree Sidebar Navigation Layout
  25. 25Multi-Tab Sidebar UI Component with Dynamic Panel Switching
  26. 26Onboarding Wizard Sidebar Layout with Step Progress Tracking
  27. 27Pure CSS Resizable Sidebar Layout Using Resize Property
  28. 28Three-Pane Productivity Workspace Shell Layout
  29. 29Next-Gen Adaptive Sidebar Layout Using CSS Container Queries
  30. 30Frosted Glass Floating Sidebar Layout with Backdrop Blur
Pure CSSMIT licensed

Frosted Glass Floating Sidebar Layout with Backdrop Blur

The showpiece: a floating frosted-glass sidebar over a slowly-drifting aurora, with heavy blur + saturation, a light-catching gradient hairline, glass nav pills, and a glowing gradient CTA — the portfolio/creative-landing treatment pushed to full art direction while staying readable, keyboard-navigable and reduced-motion-safe.

Live Demo
Plain CSSTailwind v4
Try it

Mosaic by Cruip: a complete Tailwind admin dashboard template in HTML, React, Next.js and Vue · $69

Cruip · Mosaic by Cruip · Affiliate link

View Mosaic dashboard

The code

<section class="sbl-30">
  <aside class="sbl-30__glass" aria-label="Portfolio">
    <div class="sbl-30__brand"><span aria-hidden="true"></span>Aurora Studio</div>
    <nav class="sbl-30__nav">
      <a href="#" aria-current="page">Work</a><a href="#">About</a><a href="#">Journal</a><a href="#">Contact</a>
    </nav>
    <a class="sbl-30__cta" href="#">Start a project<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a>
  </aside>
  <main class="sbl-30__stage">
    <h1>Design that<br>holds light.</h1>
    <p>A brand &amp; digital studio. The sidebar is one pane of frosted glass over a living aurora — blur, saturation and a light-catching hairline.</p>
  </main>
</section>
.sbl-30,
.sbl-30 *,
.sbl-30 *::before,
.sbl-30 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sbl-30 {
  --ink: oklch(0.97 0.005 300);
  --mut: oklch(0.85 0.02 300);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: system-ui,'Segoe UI',sans-serif;
  color: var(--ink);
  background: oklch(0.15 0.03 290);
}

.sbl-30::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(38% 42% at 30% 30%,oklch(0.55 0.22 310 / .8),transparent 70%),radial-gradient(34% 38% at 72% 62%,oklch(0.6 0.18 230 / .7),transparent 70%),radial-gradient(30% 34% at 50% 85%,oklch(0.65 0.16 180 / .5),transparent 70%);
  animation: sbl30-drift 24s ease-in-out infinite alternate;
}

@keyframes sbl30-drift {
  from {
    transform: translate3d(-3%,-2%,0) rotate(0deg) scale(1);
  }

  to {
    transform: translate3d(3%,2%,0) rotate(4deg) scale(1.08);
  }
}

.sbl-30__glass {
  width: 256px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  border-radius: 22px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.08)) padding-box,linear-gradient(155deg,rgba(255,255,255,.6),rgba(255,255,255,.15) 35%,rgba(255,255,255,.04)) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 12px 40px oklch(0 0 0 / .35),inset 0 1px 0 rgba(255,255,255,.2);
}

.sbl-30__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font: 700 16px/1 system-ui,sans-serif;
  padding: 2px 10px 24px;
  letter-spacing: .01em;
}

.sbl-30__brand span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: conic-gradient(oklch(0.75 0.16 310),oklch(0.75 0.14 230),oklch(0.78 0.14 180),oklch(0.75 0.16 310));
  box-shadow: 0 0 16px oklch(0.7 0.18 290 / .6);
}

.sbl-30__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sbl-30__nav a {
  padding: 12px 14px;
  border-radius: 12px;
  font: 500 14.5px/1 system-ui,sans-serif;
  color: var(--mut);
  text-decoration: none;
  transition: background-color .2s ease,color .2s ease;
}

.sbl-30__nav a:hover {
  color: var(--ink);
  background: rgba(255,255,255,.1);
}

.sbl-30__nav a[aria-current="page"] {
  color: var(--ink);
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.sbl-30__nav a:focus-visible,
.sbl-30__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.sbl-30__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  border-radius: 14px;
  font: 650 14px/1 system-ui,sans-serif;
  color: oklch(0.2 0.04 300);
  text-decoration: none;
  background: linear-gradient(120deg,oklch(0.85 0.1 310),oklch(0.87 0.09 220));
  box-shadow: 0 6px 24px oklch(0.7 0.18 290 / .45);
  transition: transform .2s ease,box-shadow .2s ease;
}

.sbl-30__cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate .2s ease;
}

.sbl-30__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px oklch(0.7 0.18 290 / .6);
}

.sbl-30__cta:hover svg {
  translate: 3px 0;
}

.sbl-30__stage {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 48px 56px;
}

.sbl-30__stage h1 {
  font: 750 clamp(34px,5vw,54px)/1.08 system-ui,sans-serif;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px oklch(0 0 0 / .3);
}

.sbl-30__stage p {
  font: 400 15px/1.7 system-ui,sans-serif;
  color: var(--mut);
  max-width: 46ch;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .sbl-30::before {
    animation: none;
  }

  .sbl-30__cta {
    transition: none;
  }
}
/* No JavaScript — blur(22px) saturate(1.8) frost over a transform-only drifting aurora; gradient hairline + inner sheen make the glass read as lit. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Sidebar Layout 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: Frosted Glass Floating Sidebar Layout with Backdrop Blur
Source: https://codefronts.com/layouts/css-sidebar-layouts/glass-floating-sidebar/

The showpiece: a floating frosted-glass sidebar over a slowly-drifting aurora, with heavy blur + saturation, a light-catching gradient hairline, glass nav pills, and a glowing gradient CTA — the portfolio/creative-landing treatment pushed to full art direction while staying readable, keyboard-navigable and reduced-motion-safe.
## HTML
```html
<section class="sbl-30">
  <aside class="sbl-30__glass" aria-label="Portfolio">
    <div class="sbl-30__brand"><span aria-hidden="true"></span>Aurora Studio</div>
    <nav class="sbl-30__nav">
      <a href="#" aria-current="page">Work</a><a href="#">About</a><a href="#">Journal</a><a href="#">Contact</a>
    </nav>
    <a class="sbl-30__cta" href="#">Start a project<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a>
  </aside>
  <main class="sbl-30__stage">
    <h1>Design that<br>holds light.</h1>
    <p>A brand &amp; digital studio. The sidebar is one pane of frosted glass over a living aurora — blur, saturation and a light-catching hairline.</p>
  </main>
</section>
```
## CSS
```css
.sbl-30,
.sbl-30 *,
.sbl-30 *::before,
.sbl-30 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sbl-30 {
  --ink: oklch(0.97 0.005 300);
  --mut: oklch(0.85 0.02 300);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: system-ui,'Segoe UI',sans-serif;
  color: var(--ink);
  background: oklch(0.15 0.03 290);
}

.sbl-30::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(38% 42% at 30% 30%,oklch(0.55 0.22 310 / .8),transparent 70%),radial-gradient(34% 38% at 72% 62%,oklch(0.6 0.18 230 / .7),transparent 70%),radial-gradient(30% 34% at 50% 85%,oklch(0.65 0.16 180 / .5),transparent 70%);
  animation: sbl30-drift 24s ease-in-out infinite alternate;
}

@keyframes sbl30-drift {
  from {
    transform: translate3d(-3%,-2%,0) rotate(0deg) scale(1);
  }

  to {
    transform: translate3d(3%,2%,0) rotate(4deg) scale(1.08);
  }
}

.sbl-30__glass {
  width: 256px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  border-radius: 22px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.08)) padding-box,linear-gradient(155deg,rgba(255,255,255,.6),rgba(255,255,255,.15) 35%,rgba(255,255,255,.04)) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 12px 40px oklch(0 0 0 / .35),inset 0 1px 0 rgba(255,255,255,.2);
}

.sbl-30__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font: 700 16px/1 system-ui,sans-serif;
  padding: 2px 10px 24px;
  letter-spacing: .01em;
}

.sbl-30__brand span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: conic-gradient(oklch(0.75 0.16 310),oklch(0.75 0.14 230),oklch(0.78 0.14 180),oklch(0.75 0.16 310));
  box-shadow: 0 0 16px oklch(0.7 0.18 290 / .6);
}

.sbl-30__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sbl-30__nav a {
  padding: 12px 14px;
  border-radius: 12px;
  font: 500 14.5px/1 system-ui,sans-serif;
  color: var(--mut);
  text-decoration: none;
  transition: background-color .2s ease,color .2s ease;
}

.sbl-30__nav a:hover {
  color: var(--ink);
  background: rgba(255,255,255,.1);
}

.sbl-30__nav a[aria-current="page"] {
  color: var(--ink);
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.sbl-30__nav a:focus-visible,
.sbl-30__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.sbl-30__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  border-radius: 14px;
  font: 650 14px/1 system-ui,sans-serif;
  color: oklch(0.2 0.04 300);
  text-decoration: none;
  background: linear-gradient(120deg,oklch(0.85 0.1 310),oklch(0.87 0.09 220));
  box-shadow: 0 6px 24px oklch(0.7 0.18 290 / .45);
  transition: transform .2s ease,box-shadow .2s ease;
}

.sbl-30__cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate .2s ease;
}

.sbl-30__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px oklch(0.7 0.18 290 / .6);
}

.sbl-30__cta:hover svg {
  translate: 3px 0;
}

.sbl-30__stage {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 48px 56px;
}

.sbl-30__stage h1 {
  font: 750 clamp(34px,5vw,54px)/1.08 system-ui,sans-serif;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px oklch(0 0 0 / .3);
}

.sbl-30__stage p {
  font: 400 15px/1.7 system-ui,sans-serif;
  color: var(--mut);
  max-width: 46ch;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .sbl-30::before {
    animation: none;
  }

  .sbl-30__cta {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — blur(22px) saturate(1.8) frost over a transform-only drifting aurora; gradient hairline + inner sheen make the glass read as lit. */
```

How this works

This is demo 16's physics turned up and art-directed. The glass recipe at full strength: backdrop-filter:blur(22px) saturate(1.8) over a 10% white fill — at this blur level the saturate() boost is doing heavy lifting, keeping the aurora's color identity alive through the frost. The hairline is the two-layer padding-box/border-box gradient, and an inner top-edge sheen (inset 0 1px 0 rgba(255,255,255,.2)) reads as the lit rim of the pane.

The aurora is three oversized radial-gradient blobs on ::before, drifted by a 24s transform loop — transforms only, so the parallax costs nothing, and prefers-reduced-motion freezes it into a static gradient (the beauty survives; the motion doesn't). Readability discipline: nav text is 92% white at 14px minimum, the active pill adds a solid-ish fill BEHIND text rather than relying on the frost, and every focusable keeps a full-contrast focus ring — glassmorphism fails accessibility only when text sits on unguarded frost, and this demo shows where to put the guards.

Make it yours

  • Aurora palette: the three radial stops — shift all three hues together (~stay within 120° of each other) to re-mood the whole scene.
  • Drift speed: 24s is ambient; under 10s becomes distracting motion (and should then also respect reduced-motion users by default).
  • Glass tint: warm it with color-mix(in oklab, gold 6%, rgba(255,255,255,.1)) for evening-mode landings.
  • The CTA's glow is demo-08-style shadow discipline: brand color at 45% — reuse the numbers.

Gotchas — read before shipping

  • Layered backdrop-filters multiply GPU cost — ONE glass surface over an animated background is the budget; five glass cards over it will stutter on integrated graphics.
  • The drifting background must be transform-animated (not background-position) to stay compositor-only.
  • Keep the aurora's ::before z-indexed below everything and pointer-events-free, or it blocks text selection in the content pane.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), backdrop-filter, text-wrap as this demo is written. The core technique itself goes back further — Chrome 111+.

backdrop-filter everywhere (Safari prefixed); oklch/color-mix set the floor. Reduced-motion and no-backdrop-filter fallbacks both degrade gracefully.

Techniques used in this demo

conic-gradient()MDN ↗backdrop-filterMDN ↗text-wrap: prettyMDN ↗radial-gradient()MDN ↗grid-templateMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →