20 Pure CSS Toggles & Switches
iOS Light Mode
The iOS toggle in its light-theme presentation — clean white card backdrop, soft gray off-state, signature green on-state. Counterpart to demo 1.
iOS Light Mode the 17th of 20 designs in the 20 Pure CSS Toggles & Switches collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<label class="tg-iosl">
<input class="tg-iosl-input" type="checkbox" checked>
<span class="tg-iosl-track" aria-hidden="true">
<span class="tg-iosl-thumb"></span>
</span>
<span class="tg-iosl-label">Bluetooth</span>
</label> .tg-iosl {
/* Wrapped in a light-card backdrop because the gallery stage is dark.
This is exactly how you'd ship this in a real light-mode app —
surrounded by a white surface. */
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
font-size: 15px;
color: #1a1a1f;
user-select: none;
padding: 14px 18px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tg-iosl-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-iosl-track {
position: relative;
width: 51px;
height: 31px;
background: #e5e5ea;
border-radius: 999px;
transition: background 0.25s ease;
}
.tg-iosl-thumb {
position: absolute;
top: 2px; left: 2px;
width: 27px; height: 27px;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 1px 2px rgba(0,0,0,0.18),
0 0 1px rgba(0,0,0,0.08);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-iosl-input:checked ~ .tg-iosl-track {
background: #34c759;
}
.tg-iosl-input:checked ~ .tg-iosl-track .tg-iosl-thumb {
transform: translateX(20px);
}
.tg-iosl-input:focus-visible ~ .tg-iosl-track {
outline: 2px solid #0a84ff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.tg-iosl-track,
.tg-iosl-thumb { transition: none; }
}