Frosted glass
A translucent pane over slowly moving color.
Glass Sidebar
A frosted icon rail that slides open into a full sidebar on hover, blurring the dashboard it covers. Labels fade in after the width settles, and the active item keeps an accent marker.
Also known as: glassmorphism sidebar css, frosted sidebar menu, expanding sidebar css.
HTML
<div class="gls-glass-sidebar">
<div class="gls-glass-sidebar-board" aria-hidden="true">
<span class="gls-glass-sidebar-stat"></span>
<span class="gls-glass-sidebar-stat"></span>
<span class="gls-glass-sidebar-chart"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
</div>
<nav class="gls-glass-sidebar-rail" aria-label="Sidebar">
<a class="gls-glass-sidebar-item" href="#" aria-current="page">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3.5l8.5 7.2V20a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1v-9.3z"/></svg><span>Home</span>
</a>
<a class="gls-glass-sidebar-item" href="#">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 13h3.5v7H4zM10.25 4h3.5v16h-3.5zM16.5 9H20v11h-3.5z"/></svg><span>Analytics</span>
</a>
<a class="gls-glass-sidebar-item" href="#">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 13.5L6 5h12l2.5 8.5V19h-17z"/><path d="M3.5 13.5h5l1 2h5l1-2h5"/></svg><span>Inbox</span><b>3</b>
</a>
<a class="gls-glass-sidebar-item" href="#">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="6.6" stroke-width="3.6" stroke-dasharray="2.6 2.58"/><circle cx="12" cy="12" r="4.2" stroke-width="2.2"/></svg><span>Settings</span>
</a>
</nav>
</div>CSS
.gls-glass-sidebar {
--c: var(--gls-color, #3b82f6);
font-size: var(--gls-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 22em;
height: 12em;
border-radius: 1.25em;
overflow: hidden;
isolation: isolate;
background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #0f172a), color-mix(in srgb, var(--c) 20%, #312e81));
color: #fff;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.3;
}
.gls-glass-sidebar-board {
position: absolute;
inset: 0.7em 0.7em 0.7em 4.3em;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 3.2em 1fr;
gap: 0.6em;
}
.gls-glass-sidebar-stat {
border-radius: 0.8em;
background: radial-gradient(circle at 80% 20%, rgb(255 255 255 / 0.45), transparent 40%), linear-gradient(135deg, var(--a), var(--b));
}
.gls-glass-sidebar-stat:nth-child(1) { --a: color-mix(in srgb, var(--c) 40%, #fff); --b: var(--c); }
.gls-glass-sidebar-stat:nth-child(2) { --a: #fde68a; --b: #f472b6; }
.gls-glass-sidebar-chart {
grid-column: 1 / -1;
display: flex;
align-items: flex-end;
gap: 0.45em;
padding: 0.6em 0.8em 0;
border-radius: 0.8em;
background: rgb(255 255 255 / 0.06);
}
.gls-glass-sidebar-chart i {
flex: 1;
height: 90%;
border-radius: 0.35em 0.35em 0 0;
background: linear-gradient(180deg, #5eead4, var(--c));
transform-origin: bottom;
animation: gls-glass-sidebar-bar 2.8s ease-in-out infinite alternate;
}
.gls-glass-sidebar-chart i:nth-child(2) { animation-delay: -0.6s; }
.gls-glass-sidebar-chart i:nth-child(3) { animation-delay: -1.8s; }
.gls-glass-sidebar-chart i:nth-child(4) { animation-delay: -1s; }
.gls-glass-sidebar-chart i:nth-child(5) { animation-delay: -2.4s; }
.gls-glass-sidebar-chart i:nth-child(6) { animation-delay: -0.3s; }
.gls-glass-sidebar-chart i:nth-child(7) { animation-delay: -1.4s; }
.gls-glass-sidebar-rail {
position: absolute;
inset: 0.7em auto 0.7em 0.7em;
display: grid;
align-content: start;
gap: 0.3em;
width: 3em;
padding: 0.4em;
overflow: hidden;
border-radius: 1em;
background: color-mix(in srgb, #fff 14%, transparent);
-webkit-backdrop-filter: blur(0.9em) saturate(1.5);
backdrop-filter: blur(0.9em) saturate(1.5);
border: 1px solid color-mix(in srgb, #fff 45%, transparent);
box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gls-glass-sidebar-rail:is(:hover, :focus-within) { width: 9.5em; }
.gls-glass-sidebar-item {
position: relative;
display: flex;
align-items: center;
gap: 0.7em;
height: 2.2em;
padding: 0 0.55em;
border-radius: 0.7em;
color: rgb(255 255 255 / 0.8);
text-decoration: none;
white-space: nowrap;
transition: background-color 0.25s ease, color 0.25s ease;
}
.gls-glass-sidebar-item svg { flex: none; width: 1.1em; height: 1.1em; }
.gls-glass-sidebar-item span {
font-size: 0.75em;
font-weight: 600;
opacity: 0;
transform: translateX(-0.4em);
transition: opacity 0.2s ease, transform 0.3s ease;
}
.gls-glass-sidebar-rail:is(:hover, :focus-within) .gls-glass-sidebar-item span {
opacity: 1;
transform: none;
transition-delay: 0.15s;
}
.gls-glass-sidebar-item b {
position: absolute;
left: 1.35em;
top: 0.3em;
display: grid;
place-items: center;
min-width: 1.35em;
height: 1.35em;
border-radius: 99em;
background: #f43f5e;
font-size: 0.55em;
transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s ease;
}
.gls-glass-sidebar-rail:is(:hover, :focus-within) .gls-glass-sidebar-item b { left: 12em; top: 1.05em; }
.gls-glass-sidebar-item:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
.gls-glass-sidebar-item[aria-current="page"] {
background: rgb(255 255 255 / 0.22);
color: #fff;
box-shadow: inset 0.18em 0 0 var(--c), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.gls-glass-sidebar-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@keyframes gls-glass-sidebar-bar {
from { transform: scaleY(0.35); }
to { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
.gls-glass-sidebar, .gls-glass-sidebar *, .gls-glass-sidebar::before, .gls-glass-sidebar::after, .gls-glass-sidebar *::before, .gls-glass-sidebar *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--gls-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--gls-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.