Sky Chip Switch
A smooth pill switch with a white thumb that fills the track sky blue when on, a clean alternative to textured toggles.
Preview and code
index.html
<label class="cs"><input type="checkbox" role="switch" aria-label="Toggle" checked><span class="cs__track"><span class="cs__thumb"></span></span></label>
styles.css
.cs{position:relative;display:inline-block;width:60px;height:36px}
.cs input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cs__track{position:absolute;inset:0;border-radius:36px;background:#cbd5e1;border:3px solid #e2e8f0;box-shadow:inset 0 1px 3px rgba(0,0,0,.12);transition:background-color .25s ease}
.cs__thumb{position:absolute;top:1px;left:1px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.3,1.2,.5,1)}
.cs input:checked+.cs__track{background:#0ea5e9}
.cs input:checked+.cs__track .cs__thumb{transform:translateX(24px)}
.cs input:focus-visible+.cs__track{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.cs__track,.cs__thumb{transition:none}}About
A real checkbox with role=switch sits invisibly over the track, so it works with keyboard, screen readers and forms. It starts switched on.