Cosmic Orb Switch
A near-black pill where a cratered white planet drifts between twinkling stars and turns the sky violet.
Preview and code
index.html
<label class="orb"><input type="checkbox" role="switch" aria-label="Toggle"><span class="orb__track"><span class="orb__stars"></span><span class="orb__planet"></span></span></label>
styles.css
.orb{position:relative;display:inline-block;width:64px;height:34px}
.orb input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.orb__track{position:absolute;inset:0;border-radius:34px;background:#0d0d12;box-shadow:inset 0 2px 4px rgba(0,0,0,.6);transition:background-color .4s ease}
.orb__stars{position:absolute;top:10px;right:12px;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:9px 5px 0 -.5px #fff,-2px 11px 0 -.5px #cfd3ff;transition:right .4s ease,opacity .4s ease}
.orb__planet{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 30% 35%,#b9b9c2 0 4px,transparent 5px),radial-gradient(circle at 66% 58%,#b9b9c2 0 3px,transparent 4px),radial-gradient(circle at 40% 76%,#c8c8d0 0 2px,transparent 3px),#f2f2f5;box-shadow:0 2px 5px rgba(0,0,0,.5);transition:transform .4s cubic-bezier(.3,1.3,.5,1)}
.orb input:checked+.orb__track{background:#2a1f6e}
.orb input:checked+.orb__track .orb__planet{transform:translateX(30px) rotate(160deg)}
.orb input:checked+.orb__track .orb__stars{right:auto;left:10px}
.orb input:focus-visible+.orb__track{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.orb__track,.orb__planet,.orb__stars{transition:none}}About
The planet is one element with three radial gradients for craters. Two tiny star clusters are drawn with box-shadow and swap sides as the planet moves. No images, no JavaScript.