AI CSS Animations

Liquid Glass Slider

An iOS 26 style volume slider whose white thumb turns into a glass lens on hover and bends the track beneath it. Six radio stops and :has() move the thumb, fill and readout, so arrow keys work too.

Also known as: ios 26 slider css, liquid glass range slider, glass volume slider css.

Volume

HTML

<div class="gls-liquid-glass-slider">
  <span class="gls-liquid-glass-slider-orb gls-liquid-glass-slider-orb-a" aria-hidden="true"></span>
  <span class="gls-liquid-glass-slider-orb gls-liquid-glass-slider-orb-b" aria-hidden="true"></span>
  <div class="gls-liquid-glass-slider-panel">
    <div class="gls-liquid-glass-slider-head"><span>Volume</span><span class="gls-liquid-glass-slider-value" aria-hidden="true"></span></div>
    <div class="gls-liquid-glass-slider-row">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 9.5h3.5L13 5.5v13l-4.5-4H5z"/></svg>
      <div class="gls-liquid-glass-slider-track" role="radiogroup" aria-label="Volume">
        <span class="gls-liquid-glass-slider-fill" aria-hidden="true"></span>
        <span class="gls-liquid-glass-slider-stops">
          <label><input type="radio" name="gls-liquid-glass-slider-level" value="0" aria-label="0%"></label>
          <label><input type="radio" name="gls-liquid-glass-slider-level" value="20" aria-label="20%"></label>
          <label><input type="radio" name="gls-liquid-glass-slider-level" value="40" aria-label="40%"></label>
          <label><input type="radio" name="gls-liquid-glass-slider-level" value="60" aria-label="60%" checked></label>
          <label><input type="radio" name="gls-liquid-glass-slider-level" value="80" aria-label="80%"></label>
          <label><input type="radio" name="gls-liquid-glass-slider-level" value="100" aria-label="100%"></label>
        </span>
        <span class="gls-liquid-glass-slider-thumb" aria-hidden="true"><span class="gls-liquid-glass-slider-lens"></span></span>
      </div>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 9.5h3.5L11 5.5v13l-4.5-4H3z" fill="currentColor" stroke="none"/><path d="M14.5 9a4 4 0 0 1 0 6M17.5 6.5a7.5 7.5 0 0 1 0 11"/></svg>
    </div>
  </div>
  <svg class="gls-liquid-glass-slider-svg" width="0" height="0" aria-hidden="true" focusable="false">
    <filter id="gls-liquid-glass-slider-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.15' stop-color='%23d90000'/%3E%3Cstop offset='0.5' stop-color='%23800000'/%3E%3Cstop offset='0.85' stop-color='%23260000'/%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.22' stop-color='%2300bf00'/%3E%3Cstop offset='0.5' stop-color='%23008000'/%3E%3Cstop offset='0.78' stop-color='%23004000'/%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="18" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </svg>
</div>

CSS

.gls-liquid-glass-slider {
  --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(150deg, color-mix(in srgb, var(--c) 50%, #0f172a), color-mix(in srgb, var(--c) 25%, #4c1d95));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  --v: 0.6;
  --label: "60%";}
.gls-liquid-glass-slider:has(input[value="0"]:checked) { --v: 0; --label: "0%"; }
.gls-liquid-glass-slider:has(input[value="20"]:checked) { --v: 0.2; --label: "20%"; }
.gls-liquid-glass-slider:has(input[value="40"]:checked) { --v: 0.4; --label: "40%"; }
.gls-liquid-glass-slider:has(input[value="80"]:checked) { --v: 0.8; --label: "80%"; }
.gls-liquid-glass-slider:has(input[value="100"]:checked) { --v: 1; --label: "100%"; }
.gls-liquid-glass-slider-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-liquid-glass-slider-orb-a {
  left: 2.8em;
  top: 0.8em;
  width: 6em;
  height: 6em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  animation: gls-liquid-glass-slider-orb 7s ease-in-out infinite alternate;
}
.gls-liquid-glass-slider-orb-b {
  right: 2.5em;
  bottom: 0.6em;
  width: 5em;
  height: 5em;
  background: linear-gradient(135deg, #fde68a, #fb7185);
  animation: gls-liquid-glass-slider-orb 8s ease-in-out -4s infinite alternate-reverse;
}
.gls-liquid-glass-slider-panel {
  position: relative;
  isolation: isolate;
  padding: 0.8em 1em 0.95em;
  border-radius: 1.2em;
  box-shadow: 0 0.6em 1.5em -0.6em rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.gls-liquid-glass-slider-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
}
.gls-liquid-glass-slider-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.7em;
  font-size: 0.75em;
  font-weight: 650;
}
.gls-liquid-glass-slider-value { font-variant-numeric: tabular-nums; opacity: 0.8; }
.gls-liquid-glass-slider-value::after { content: var(--label); }
.gls-liquid-glass-slider-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.gls-liquid-glass-slider-row > svg { flex: none; width: 1em; height: 1em; opacity: 0.85; }
.gls-liquid-glass-slider-track {
  position: relative;
  width: 11em;
  height: 0.42em;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.25);
}
.gls-liquid-glass-slider-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, #fff), var(--c));
  clip-path: inset(0 calc(100% - 1.2em - var(--v) * 8.6em) 0 0 round 99em);
  transition: clip-path 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.gls-liquid-glass-slider-stops {
  position: absolute;
  inset: -1em -0.4em;
  z-index: 3;
  display: flex;
}
.gls-liquid-glass-slider-stops label {
  position: relative;
  flex: 1;
  cursor: pointer;
}
.gls-liquid-glass-slider-stops input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.gls-liquid-glass-slider-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  width: 2.4em;
  height: 1.5em;
  margin-top: -0.75em;
  border-radius: 99em;
  background: #fff;
  box-shadow: 0 0.12em 0.35em rgb(0 0 0 / 0.3);
  translate: calc(var(--v) * 8.6em) 0;
  pointer-events: none;
  transition: translate 0.55s cubic-bezier(0.34, 1.3, 0.64, 1), scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
}
.gls-liquid-glass-slider-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0) 55%);
  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);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gls-liquid-glass-slider-lens {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: url(#gls-liquid-glass-slider-lens);
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* hover or press: the thumb turns into a clear lens */
.gls-liquid-glass-slider-track:hover .gls-liquid-glass-slider-thumb {
  scale: 1.35 1.5;
  background: rgb(255 255 255 / 0.12);
}
.gls-liquid-glass-slider-track:hover .gls-liquid-glass-slider-lens,
.gls-liquid-glass-slider-track:hover .gls-liquid-glass-slider-thumb::after { opacity: 1; }
.gls-liquid-glass-slider-track:has(input:focus-visible) .gls-liquid-glass-slider-thumb { outline: 2px solid #fff; outline-offset: 0.2em; }
.gls-liquid-glass-slider-svg {
  position: absolute;
  width: 0;
  height: 0;
}
@keyframes gls-liquid-glass-slider-orb {
  to { transform: translate(2.5em, 1em) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .gls-liquid-glass-slider, .gls-liquid-glass-slider *, .gls-liquid-glass-slider::before, .gls-liquid-glass-slider::after, .gls-liquid-glass-slider *::before, .gls-liquid-glass-slider *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --gls-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --gls-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. 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.

Similar glass effects

Liquid Glass Button
Liquid Glass Card
Liquid Glass Switch
Liquid Glass Tab Bar