Back to CSS Sidebar Layouts Overlay with Backdrop Pure CSS
Share 
.sb-ovl {
  position: relative; min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: radial-gradient(ellipse at top, #1a1947 0%, #060321 60%, #02010d 100%);
  color: #e8e6ff;
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.sb-ovl-aurora-1, .sb-ovl-aurora-2 { position: absolute; pointer-events: none; z-index: 0; mix-blend-mode: screen; filter: blur(48px); }
.sb-ovl-aurora-1 {
  top: -10%; left: -10%; width: 80%; height: 70%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,82,170,0.55), transparent 60%);
  animation: sb-ovl-drift1 14s ease-in-out infinite alternate;
}
.sb-ovl-aurora-2 {
  bottom: -20%; right: -10%; width: 80%; height: 80%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,229,255,0.45), transparent 60%);
  animation: sb-ovl-drift2 18s ease-in-out infinite alternate;
}
.sb-ovl-stars {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(1px 1px at 14% 22%, #fff, transparent),
    radial-gradient(1px 1px at 38% 14%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 52% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 73% 18%, #fff, transparent),
    radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 22% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 64% 60%, #fff, transparent),
    radial-gradient(1px 1px at 12% 76%, rgba(255,255,255,0.5), transparent);
}
@keyframes sb-ovl-drift1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(8%, 4%); }
}
@keyframes sb-ovl-drift2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-6%, -3%); }
}
@media (prefers-reduced-motion: reduce) { .sb-ovl-aurora-1, .sb-ovl-aurora-2 { animation: none; } }
.sb-ovl-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-ovl:has(.sb-ovl-cb:focus-visible) .sb-ovl-burger { outline: 2px solid #ff52aa; outline-offset: 2px; }
.sb-ovl-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(8,4,32,0.45);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sb-ovl-burger {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.14s;
}
.sb-ovl-burger:hover { background: rgba(255,255,255,0.16); }
.sb-ovl-burger span { display: inline-flex; flex-direction: column; gap: 3px; }
.sb-ovl-burger i { display: block; width: 16px; height: 2px; background: linear-gradient(90deg, #ff52aa, #00e5ff); border-radius: 2px; }
.sb-ovl-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.sb-ovl-mark { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #ff52aa 0%, #00e5ff 100%); box-shadow: 0 0 16px rgba(255,82,170,0.6); }
.sb-ovl-time { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #b8b6ff; letter-spacing: 0.06em; }
.sb-ovl-main { position: relative; z-index: 2; flex: 1; padding: 32px 36px; display: flex; flex-direction: column; gap: 16px; }
.sb-ovl-eye { font-size: 12px; color: #00e5ff; letter-spacing: 0.04em; font-style: italic; text-shadow: 0 0 12px rgba(0,229,255,0.5); }
.sb-ovl-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 800; line-height: 0.95;
  color: #fff; letter-spacing: -0.03em;
  text-shadow: 0 0 30px rgba(255,82,170,0.3);
}
.sb-ovl-main h2 em { font-style: italic; background: linear-gradient(135deg, #ff52aa, #00e5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-ovl-main p  { margin: 0; font-size: 13.5px; color: rgba(232,230,255,0.85); line-height: 1.6; max-width: 460px; }
.sb-ovl-main code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #ff52aa; background: rgba(255,82,170,0.12); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(255,82,170,0.3); }
.sb-ovl-backdrop {
  position: absolute; inset: 0;
  background: rgba(2,1,13,0.4);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.26s ease;
  z-index: 3;
}
.sb-ovl:has(.sb-ovl-cb:checked) .sb-ovl-backdrop { opacity: 1; pointer-events: auto; }
.sb-ovl-drawer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 280px;
  background: rgba(20,16,46,0.55);
  backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border-right: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    8px 0 32px rgba(0,0,0,0.4),
    inset -1px 0 0 rgba(255,82,170,0.5),
    inset 1px 1px 0 rgba(255,255,255,0.18);
  transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 4;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 14px;
}
.sb-ovl:has(.sb-ovl-cb:checked) .sb-ovl-drawer { transform: translateX(0); }
.sb-ovl-drawer header { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.sb-ovl-drawer header strong { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.sb-ovl-close { font-size: 22px; line-height: 1; color: rgba(255,255,255,0.7); cursor: pointer; padding: 0 8px; user-select: none; transition: color 0.14s; }
.sb-ovl-close:hover { color: #ff52aa; }
.sb-ovl-drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-ovl-drawer a { display: block; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); text-decoration: none; border: 1px solid transparent; transition: background 0.14s, color 0.14s, border-color 0.14s; }
.sb-ovl-drawer a:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }
.sb-ovl-drawer a[aria-current="page"] { background: linear-gradient(90deg, rgba(255,82,170,0.22), rgba(0,229,255,0.22)); color: #fff; border-color: rgba(255,255,255,0.3); box-shadow: 0 0 16px rgba(255,82,170,0.3); }
.sb-ovl-foot { margin-top: auto; padding: 10px 6px 0; border-top: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.06em; }
.sb-ovl-dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff9c; box-shadow: 0 0 12px #00ff9c; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .sb-ovl-drawer, .sb-ovl-backdrop { transition: none; }
}
<div class="sb-ovl">
  <span class="sb-ovl-aurora-1" aria-hidden="true"></span>
  <span class="sb-ovl-aurora-2" aria-hidden="true"></span>
  <span class="sb-ovl-stars" aria-hidden="true"></span>
  <input id="sb-ovl-t" class="sb-ovl-cb" type="checkbox" aria-label="Toggle navigation" />
  <header class="sb-ovl-bar">
    <label class="sb-ovl-burger" for="sb-ovl-t" aria-controls="sb-ovl-drawer">
      <span aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="sr-only">Open menu</span>
    </label>
    <strong class="sb-ovl-brand">
      <span class="sb-ovl-mark" aria-hidden="true"></span>
      Polaris
    </strong>
    <span class="sb-ovl-time">63°N · 02:47</span>
  </header>
  <main class="sb-ovl-main">
    <span class="sb-ovl-eye">— Tonight, the sky moves slowly</span>
    <h2>The aurora<br/><em>opens</em> the menu.</h2>
    <p>Tap the burger — the drawer slides in over the page, the backdrop blurs the night sky behind. Tap the dim area or × to dismiss. Pure CSS, no JavaScript required.</p>
  </main>
  <label class="sb-ovl-backdrop" for="sb-ovl-t" aria-hidden="true"></label>
  <aside id="sb-ovl-drawer" class="sb-ovl-drawer" aria-label="Primary">
    <header>
      <strong>Menu</strong>
      <label class="sb-ovl-close" for="sb-ovl-t" aria-label="Close menu">×</label>
    </header>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#!" aria-current="page">Home</a></li>
        <li><a href="#!">Library</a></li>
        <li><a href="#!">Saved</a></li>
        <li><a href="#!">Activity</a></li>
        <li><a href="#!">Settings</a></li>
      </ul>
    </nav>
    <footer class="sb-ovl-foot">
      <span class="sb-ovl-dot" aria-hidden="true"></span>
      Aurora · KP 5.4
    </footer>
  </aside>
</div>
Live preview Edit any tab — preview updates live Ready