Glass Toggle — Playground

{CF} CodeFronts Back to CSS Glassmorphism Glass Toggle Pure CSS

Edit any tab — preview updates live

.gm-toggle-bg {
  position: relative; padding: 32px 28px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 30%, #f59e0b 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, #ec4899 0%, transparent 55%),
    #2a0a1f;
}
.gm-toggle {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
}
.gm-toggle__input {
  position: absolute; opacity: 0; pointer-events: none;
}
.gm-toggle__track {
  position: relative; display: inline-block;
  width: 48px; height: 28px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  transition: background 0.25s, border-color 0.25s;
}
.gm-toggle__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: left 0.25s cubic-bezier(.3, 1.3, .5, 1), background 0.25s;
}
.gm-toggle__input:checked + .gm-toggle__track {
  background: rgba(34, 197, 94, 0.4);
  border-color: rgba(34, 197, 94, 0.6);
}
.gm-toggle__input:checked + .gm-toggle__track .gm-toggle__thumb {
  left: 22px;
  background: #fff;
}
.gm-toggle__label {
  font: 600 13px system-ui, sans-serif;
  color: #fff;
}

Live preview Ready