20 Pure CSS Toggles & Switches
iOS
The reference iOS-style pill toggle — translucent track, white thumb with a subtle drop shadow, smooth slide on toggle. Honors prefers-reduced-motion.
iOS the 7th 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-ios">
<input class="tg-ios-input" type="checkbox" checked>
<span class="tg-ios-track" aria-hidden="true">
<span class="tg-ios-thumb"></span>
</span>
<span class="tg-ios-label">Wi-Fi</span>
</label> .tg-ios {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
font-size: 15px;
color: #f0eeff;
user-select: none;
}
.tg-ios-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-ios-track {
position: relative;
width: 51px;
height: 31px;
background: rgba(120,120,128,0.32);
border-radius: 999px;
transition: background 0.25s ease;
}
.tg-ios-thumb {
position: absolute;
top: 2px; left: 2px;
width: 27px; height: 27px;
border-radius: 50%;
background: #ffffff;
/* Tighter shadow than real iOS — on iOS the shadow casts onto the
screen background; here the toggle sits on a card and a softer
shadow keeps the thumb visually contained within the track. */
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-ios-input:checked ~ .tg-ios-track {
background: #34c759;
}
.tg-ios-input:checked ~ .tg-ios-track .tg-ios-thumb {
transform: translateX(20px);
}
.tg-ios-input:focus-visible ~ .tg-ios-track {
outline: 2px solid #0a84ff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.tg-ios-track,
.tg-ios-thumb { transition: none; }
}