.cb-aurora {
display: inline-flex; align-items: center;
gap: 10px; cursor: pointer; user-select: none;
}
.cb-aurora__input { display: none; }
.cb-aurora__track {
width: 56px; height: 28px; border-radius: 14px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
position: relative;
transition: background .4s, border-color .4s;
}
.cb-aurora__thumb {
position: absolute; top: 4px; left: 4px;
width: 20px; height: 20px; border-radius: 50%;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.cb-aurora__input:checked + .cb-aurora__track {
background: linear-gradient(90deg,
#7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
background-size: 300% 100%;
border-color: transparent;
animation: aurora-shift 3s linear infinite;
}
.cb-aurora__input:checked
+ .cb-aurora__track .cb-aurora__thumb {
transform: translateX(28px);
}
@keyframes aurora-shift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
} <label class="cb-aurora">
<input class="cb-aurora__input" type="checkbox" checked />
<span class="cb-aurora__track">
<span class="cb-aurora__thumb"></span>
</span>
<span>Aurora toggle</span>
</label> Live preview Edit any tab — preview updates live Ready