CSS
.tg-glass {
/* A subtle colored backdrop behind the track makes the backdrop-filter
blur visible. Without a non-flat background the glass effect has
nothing to refract. */
display: inline-flex;
align-items: center;
gap: 14px;
cursor: pointer;
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
font-size: 14px;
color: #f0eeff;
user-select: none;
padding: 16px 18px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(124,108,255,0.18), rgba(255,108,138,0.12));
}
.tg-glass-input {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.tg-glass-track {
position: relative;
width: 56px;
height: 30px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
transition: background 0.3s ease, border-color 0.3s ease;
box-sizing: border-box;
}
.tg-glass-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 24px; height: 24px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 2px 6px rgba(0,0,0,0.18);
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background 0.3s ease;
}
.tg-glass-input:checked ~ .tg-glass-track {
background: rgba(124,108,255,0.32);
border-color: rgba(124,108,255,0.55);
}
.tg-glass-input:checked ~ .tg-glass-track .tg-glass-thumb {
/* Inner width: 56 - 2 = 54. Thumb 24. Max left to stay inside: 54-24-2 = 28. */
left: 28px;
background: rgba(255,255,255,0.95);
}
.tg-glass-input:focus-visible ~ .tg-glass-track {
outline: 2px solid rgba(255,255,255,0.7);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.tg-glass-track,
.tg-glass-thumb { transition: none; }
}