Back to CSS Sidebar Layouts Glass Floating Sidebar Pure CSS
Share 
.sb-glx {
  position: relative;
  display: grid; grid-template-columns: 260px 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  color: #fff;
  border-radius: 14px; overflow: hidden;
  isolation: isolate;
  background: #1a0033;
}
.sb-glx-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #2d0066 0%, #6a0a8c 30%, #ec1d8c 65%, #ff5e9c 80%, #ffa56a 100%);
  z-index: 0;
}
.sb-glx-sun {
  position: absolute;
  bottom: 32%; left: 50%;
  width: 220px; height: 220px;
  margin-left: -110px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd700 0%, #ff5e9c 60%, #ec1d8c 100%);
  box-shadow: 0 0 80px rgba(255,215,0,0.6), 0 0 160px rgba(236,29,140,0.5);
  z-index: 1;
  animation: sb-glx-rise 12s ease-in-out infinite alternate;
}
.sb-glx-sun::before, .sb-glx-sun::after {
  content: ''; position: absolute; left: 0; right: 0; height: 5px;
  background: #1a0033;
}
.sb-glx-sun::before { bottom: 30%; box-shadow: 0 14px 0 #1a0033, 0 30px 0 #1a0033, 0 50px 0 #1a0033, 0 75px 0 #1a0033; }
.sb-glx-sun::after  { display: none; }
.sb-glx-grid {
  position: absolute; bottom: 0; left: 0; right: 0; height: 38%;
  background:
    linear-gradient(transparent 0%, rgba(0,229,255,0.4) 100%),
    repeating-linear-gradient(90deg, transparent 0 calc((100% / 24) - 1px), rgba(0,229,255,0.5) calc((100% / 24) - 1px) calc(100% / 24));
  background-size: 100% 100%, 100% 100%;
  transform: perspective(300px) rotateX(60deg);
  transform-origin: bottom;
  z-index: 1;
  mask-image: linear-gradient(transparent 0%, #000 30%);
  -webkit-mask-image: linear-gradient(transparent 0%, #000 30%);
}
.sb-glx-grid::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,229,255,0.45) 18px 19px);
}
.sb-glx-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
@keyframes sb-glx-rise {
  from { transform: translateY(20px); }
  to   { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .sb-glx-sun { animation: none; } }
.sb-glx-side {
  position: relative; z-index: 3;
  margin: 18px 0 18px 18px; padding: 18px 14px; width: 224px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 16px;
}
.sb-glx-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); text-decoration: none; }
.sb-glx-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #00e5ff 0%, #ec1d8c 50%, #ffd700 100%); box-shadow: 0 0 18px rgba(236,29,140,0.6), inset 0 1px 0 rgba(255,255,255,0.5); }
.sb-glx-name { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 0.18em; line-height: 1; text-shadow: 0 0 8px rgba(255,94,156,0.8); }
.sb-glx-name small { display: block; font-family: 'Courier New', monospace; font-size: 9.5px; color: #00e5ff; font-weight: 700; letter-spacing: 0.4em; margin-top: 4px; text-shadow: 0 0 6px rgba(0,229,255,0.7); }
.sb-glx-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-glx-side a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85); text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s, text-shadow 0.18s;
}
.sb-glx-side a:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  text-shadow: 0 0 8px rgba(0,229,255,0.6);
}
.sb-glx-side a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(0,229,255,0.25), rgba(236,29,140,0.25));
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  text-shadow: 0 0 10px rgba(0,229,255,0.7);
  box-shadow: inset 0 0 16px rgba(0,229,255,0.15);
}
.sb-glx-side footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 6px 0; border-top: 1px solid rgba(255,255,255,0.15); }
.sb-glx-dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff9c; box-shadow: 0 0 12px #00ff9c, 0 0 24px rgba(0,255,156,0.5); animation: sb-glx-blink 1.6s ease-in-out infinite; }
@keyframes sb-glx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .sb-glx-dot { animation: none; } }
.sb-glx-side small { font-family: 'Courier New', monospace; font-size: 10.5px; color: rgba(255,255,255,0.85); letter-spacing: 0.06em; }
.sb-glx-main { position: relative; z-index: 3; padding: 32px 36px; display: flex; flex-direction: column; gap: 16px; }
.sb-glx-eye { font-family: 'Courier New', monospace; font-size: 11.5px; letter-spacing: 0.4em; color: #00e5ff; text-shadow: 0 0 10px rgba(0,229,255,0.7); }
.sb-glx-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 64px); font-weight: 900; line-height: 0.92;
  color: #fff; letter-spacing: -0.03em;
  text-shadow:
    -2px 0 0 rgba(236,29,140,0.7),
    2px 0 0 rgba(0,229,255,0.7),
    0 0 30px rgba(255,255,255,0.4);
}
.sb-glx-main p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.92); line-height: 1.6; max-width: 460px; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.sb-glx-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #00e5ff; background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(0,229,255,0.4); }
.sb-glx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.sb-glx-tags span { font-family: 'Courier New', monospace; font-size: 10.5px; padding: 5px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 720px) {
  .sb-glx { grid-template-columns: 1fr; }
  .sb-glx-side { width: auto; margin: 14px 14px 0; }
}
<div class="sb-glx">
  <div class="sb-glx-sky" aria-hidden="true"></div>
  <div class="sb-glx-sun" aria-hidden="true"></div>
  <div class="sb-glx-grid" aria-hidden="true"></div>
  <div class="sb-glx-scan" aria-hidden="true"></div>
  <aside class="sb-glx-side" aria-label="Primary">
    <a class="sb-glx-brand" href="#!">
      <span class="sb-glx-mark" aria-hidden="true"></span>
      <span class="sb-glx-name">Mirage<small>1995</small></span>
    </a>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#!" aria-current="page">▸ Overview</a></li>
        <li><a href="#!">Projects</a></li>
        <li><a href="#!">Members</a></li>
        <li><a href="#!">Activity</a></li>
        <li><a href="#!">Settings</a></li>
      </ul>
    </nav>
    <footer>
      <span class="sb-glx-dot" aria-hidden="true"></span>
      <small>Online · 24,891</small>
    </footer>
  </aside>
  <main class="sb-glx-main">
    <span class="sb-glx-eye">◇ A E S T H E T I C ◇</span>
    <h2>Glass<br/>over sunset.</h2>
    <p>The sidebar floats above a setting-sun horizon and a perspective grid that fades into haze. Backdrop-blur frosts the glass; pure CSS keyframes drift the sun.</p>
    <div class="sb-glx-tags">
      <span>vaporwave</span><span>aesthetic</span><span>1995</span><span>chrome</span>
    </div>
  </main>
</div>
Live preview Edit any tab — preview updates live Ready