Liquid Glass Switch on Wallpaper: Pure CSS Toggle Switch

Liquid Glass Switch on Wallpaper

An Apple style liquid glass switch on its own drifting color wallpaper. The track is frosted glass and the wide knob is a clear lens with a bright rim, built with backdrop-filter and inset light.

Also known as: liquid glass switch, switch liquid glass, apple liquid glass toggle css, glassmorphism toggle switch.

Color Size 24px Dark background

HTML

<label class="tgl-liquid-glass-wallpaper">
  <input type="checkbox" role="switch" aria-label="Do Not Disturb" checked>
  <span class="tgl-liquid-glass-wallpaper-text" aria-hidden="true">
    <span class="tgl-liquid-glass-wallpaper-title">Do Not Disturb</span>
    <span class="tgl-liquid-glass-wallpaper-sub">Until 8:00 AM</span>
  </span>
  <span class="tgl-liquid-glass-wallpaper-track" aria-hidden="true"><span class="tgl-liquid-glass-wallpaper-knob"></span></span>
</label>

CSS

.tgl-liquid-glass-wallpaper {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
  line-height: 1.2;
  gap: 1.4em;
  padding: 1.1em 1.1em 1.1em 1.3em;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.3em;
  color: #fff;
  box-shadow: 0 0.8em 1.6em -0.8em rgb(30 20 80 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
/* the wallpaper: soft color blobs on a slow, seamless turn */
.tgl-liquid-glass-wallpaper::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 22em;
  height: 22em;
  margin: -11em 0 0 -11em;
  background:
    radial-gradient(circle at 40% 42%, color-mix(in srgb, var(--c) 90%, #fff) 0, transparent 16%),
    radial-gradient(circle at 60% 40%, #f472b6 0, transparent 17%),
    radial-gradient(circle at 58% 60%, #fb923c 0, transparent 15%),
    radial-gradient(circle at 40% 58%, #8b5cf6 0, transparent 18%),
    #312e81;
  animation: tgl-liquid-glass-wallpaper-turn 18s linear infinite;
}
.tgl-liquid-glass-wallpaper input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-liquid-glass-wallpaper-text {
  display: grid;
  gap: 0.15em;
  text-shadow: 0 0.05em 0.3em rgb(0 0 0 / 0.25);
}
.tgl-liquid-glass-wallpaper-title {
  font-size: 0.88em;
  font-weight: 650;
}
.tgl-liquid-glass-wallpaper-sub {
  font-size: 0.7em;
  opacity: 0.75;
}
.tgl-liquid-glass-wallpaper-track {
  position: relative;
  flex: none;
  width: 3.9em;
  height: 1.75em;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(0.5em) saturate(1.6);
  backdrop-filter: blur(0.5em) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3), inset 0 0.12em 0.25em rgb(0 0 0 / 0.2);
  transition: background-color 0.35s ease;
}
.tgl-liquid-glass-wallpaper-knob {
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 2.35em;
  height: 1.5em;
  border-radius: 99em;
  background: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.4));
  -webkit-backdrop-filter: blur(0.1em) saturate(1.8) brightness(1.15);
  backdrop-filter: blur(0.1em) saturate(1.8) brightness(1.15);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.75),
    inset 0 0.12em 0.1em rgb(255 255 255 / 0.9),
    inset 0 -0.15em 0.3em rgb(255 255 255 / 0.3),
    0 0.2em 0.5em rgb(0 0 0 / 0.25);
  transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.5, 1), background 0.25s ease, scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* the specular streak across the top of the lens */
.tgl-liquid-glass-wallpaper-knob::before {
  content: "";
  position: absolute;
  top: 0.14em;
  left: 0.4em;
  right: 0.4em;
  height: 0.35em;
  border-radius: 99em;
  background: linear-gradient(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0));
}
.tgl-liquid-glass-wallpaper input:checked + .tgl-liquid-glass-wallpaper-text + .tgl-liquid-glass-wallpaper-track {
  background: color-mix(in srgb, var(--c) 70%, transparent);
}
.tgl-liquid-glass-wallpaper input:checked + .tgl-liquid-glass-wallpaper-text + .tgl-liquid-glass-wallpaper-track .tgl-liquid-glass-wallpaper-knob {
  transform: translateX(1.3em);
}
/* pressed: the knob swells into a clearer lens */
.tgl-liquid-glass-wallpaper:active .tgl-liquid-glass-wallpaper-knob {
  scale: 1.15 1.25;
  background: linear-gradient(rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.08));
}
.tgl-liquid-glass-wallpaper input:focus-visible + .tgl-liquid-glass-wallpaper-text + .tgl-liquid-glass-wallpaper-track {
  outline: 0.12em solid #fff;
  outline-offset: 0.2em;
}
@keyframes tgl-liquid-glass-wallpaper-turn {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tgl-liquid-glass-wallpaper *,
  .tgl-liquid-glass-wallpaper *::before,
  .tgl-liquid-glass-wallpaper *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

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

Customizing this snippet

Color: set --tgl-color on the element or a parent. Currently previewing #3b82f6.
Size: set --tgl-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 24px.
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.

Liquid Glass Switch on Wallpaper

HTML

CSS

Customizing this snippet

Similar toggle switches