23 CSS Checkboxes 23 / 23
Aurora Toggle
A toggle whose track fills with a shifting aurora gradient when active.
The code
<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> <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>.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%; }
}
@media (prefers-reduced-motion: reduce) {
.cb-aurora,
.cb-aurora * {
animation: none !important;
}
}
.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%; }
}
@media (prefers-reduced-motion: reduce) {
.cb-aurora,
.cb-aurora * {
animation: none !important;
}
}