Liquid Glass Tab Bar
A floating iOS 26 tab bar over a scrolling feed. The selected tab wears a glass droplet that magnifies the icon under it and springs to the tab you pick. Radio inputs and :has(), no script.
Also known as: ios 26 tab bar css, liquid glass navbar css, floating tab bar css.
HTML
<div class="gls-liquid-glass-tab-bar">
<div class="gls-liquid-glass-tab-bar-feed" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="gls-liquid-glass-tab-bar-bar">
<span class="gls-liquid-glass-tab-bar-drop" aria-hidden="true"></span>
<label class="gls-liquid-glass-tab-bar-tab">
<input type="radio" name="gls-liquid-glass-tab-bar-tab" checked aria-label="Home">
<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>
</label>
<label class="gls-liquid-glass-tab-bar-tab">
<input type="radio" name="gls-liquid-glass-tab-bar-tab" aria-label="Search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></svg>
<span>Search</span>
</label>
<label class="gls-liquid-glass-tab-bar-tab">
<input type="radio" name="gls-liquid-glass-tab-bar-tab" aria-label="Saved">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 20.5s-8-4.7-8-10.6A4.4 4.4 0 0 1 12 7.3a4.4 4.4 0 0 1 8 2.6c0 5.9-8 10.6-8 10.6z"/></svg>
<span>Saved</span>
</label>
<label class="gls-liquid-glass-tab-bar-tab">
<input type="radio" name="gls-liquid-glass-tab-bar-tab" aria-label="Profile">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="8" r="4.2"/><path d="M3.8 21a8.2 8.2 0 0 1 16.4 0z"/></svg>
<span>Profile</span>
</label>
</div>
<svg class="gls-liquid-glass-tab-bar-svg" width="0" height="0" aria-hidden="true" focusable="false">
<filter id="gls-liquid-glass-tab-bar-lens" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
<feImage href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3ClinearGradient id='x'%3E%3Cstop offset='0' stop-color='%23800000'/%3E%3Cstop offset='0.12' stop-color='%23cc0000'/%3E%3Cstop offset='0.5' stop-color='%23800000'/%3E%3Cstop offset='0.88' stop-color='%23330000'/%3E%3Cstop offset='1' stop-color='%23800000'/%3E%3C/linearGradient%3E%3ClinearGradient id='y' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23008000'/%3E%3Cstop offset='0.14' stop-color='%2300b300'/%3E%3Cstop offset='0.5' stop-color='%23008000'/%3E%3Cstop offset='0.86' stop-color='%23004d00'/%3E%3Cstop offset='1' stop-color='%23008000'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23x)'/%3E%3Crect width='1' height='1' fill='url(%23y)' style='mix-blend-mode:screen'/%3E%3C/svg%3E" preserveAspectRatio="none" result="map"/>
<feDisplacementMap in="SourceGraphic" in2="map" scale="20" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
</div>CSS
.gls-liquid-glass-tab-bar {
--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: color-mix(in srgb, var(--c) 30%, #0f172a);
color: #fff;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.3;
}
.gls-liquid-glass-tab-bar-feed {
position: absolute;
inset: 0.5em 0.5em auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.45em;
animation: gls-liquid-glass-tab-bar-scroll 12s linear infinite;
}
.gls-liquid-glass-tab-bar-feed span {
height: 4.4em;
border-radius: 0.8em;
background: radial-gradient(circle at 28% 30%, rgb(255 255 255 / 0.55), transparent 32%), linear-gradient(135deg, var(--a), var(--b));
}
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 1) { --a: color-mix(in srgb, var(--c) 50%, #fff); --b: var(--c); }
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 2) { --a: #fde68a; --b: #f97316; }
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 3) { --a: #f9a8d4; --b: #db2777; }
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 4) { --a: #6ee7b7; --b: #0d9488; }
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 5) { --a: #c4b5fd; --b: #7c3aed; }
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 6) { --a: #fca5a5; --b: color-mix(in srgb, var(--c) 40%, #dc2626); }
.gls-liquid-glass-tab-bar-bar {
position: absolute;
left: 50%;
bottom: 0.7em;
isolation: isolate;
display: flex;
padding: 0.25em;
border-radius: 99em;
translate: -50% 0;
box-shadow: 0 0.6em 1.4em -0.4em rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.2);
}
.gls-liquid-glass-tab-bar-bar::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: rgb(15 23 42 / 0.4);
-webkit-backdrop-filter: blur(0.8em) saturate(1.8);
backdrop-filter: blur(0.8em) saturate(1.8);
}
.gls-liquid-glass-tab-bar-tab {
position: relative;
display: grid;
justify-items: center;
align-content: center;
gap: 0.1em;
width: 3.6em;
height: 2.6em;
border-radius: 99em;
color: rgb(255 255 255 / 0.85);
cursor: pointer;
transition: color 0.3s ease;
}
.gls-liquid-glass-tab-bar-tab input {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.gls-liquid-glass-tab-bar-tab svg {
width: 1.15em;
height: 1.15em;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gls-liquid-glass-tab-bar-tab span { font-size: 0.55em; font-weight: 600; }
.gls-liquid-glass-tab-bar-tab:hover svg { transform: translateY(-0.1em); }
.gls-liquid-glass-tab-bar-tab:has(input:checked) { color: color-mix(in srgb, var(--c) 55%, #fff); }
.gls-liquid-glass-tab-bar-tab:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: -2px; }
.gls-liquid-glass-tab-bar-drop {
position: absolute;
left: 0.1em;
top: 0.1em;
z-index: 2;
width: 3.9em;
height: 2.9em;
border-radius: 99em;
background: rgb(255 255 255 / 0.1);
box-shadow: inset 0.08em 0.1em 0.06em -0.04em rgb(255 255 255 / 0.75),
inset -0.08em -0.1em 0.06em -0.04em rgb(255 255 255 / 0.4),
inset 0 0 0 1px rgb(255 255 255 / 0.22);
backdrop-filter: url(#gls-liquid-glass-tab-bar-lens);
pointer-events: none;
transition: transform 0.55s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.gls-liquid-glass-tab-bar-bar:has(.gls-liquid-glass-tab-bar-tab:nth-of-type(2) input:checked) .gls-liquid-glass-tab-bar-drop { transform: translateX(3.6em); }
.gls-liquid-glass-tab-bar-bar:has(.gls-liquid-glass-tab-bar-tab:nth-of-type(3) input:checked) .gls-liquid-glass-tab-bar-drop { transform: translateX(7.2em); }
.gls-liquid-glass-tab-bar-bar:has(.gls-liquid-glass-tab-bar-tab:nth-of-type(4) input:checked) .gls-liquid-glass-tab-bar-drop { transform: translateX(10.8em); }
.gls-liquid-glass-tab-bar-svg {
position: absolute;
width: 0;
height: 0;
}
@keyframes gls-liquid-glass-tab-bar-scroll {
to { transform: translateY(-9.7em); }
}
@media (prefers-reduced-motion: reduce) {
.gls-liquid-glass-tab-bar, .gls-liquid-glass-tab-bar *, .gls-liquid-glass-tab-bar::before, .gls-liquid-glass-tab-bar::after, .gls-liquid-glass-tab-bar *::before, .gls-liquid-glass-tab-bar *::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.