iOS Switch Glow
A copy-paste toggles & inputs component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Toggles & InputsHTMLCSSany framework
Copy into your project
HTML
<!-- iOS Switch Glow — iOS-style switch that glows lime when on -->
<label class="nuda-ios-switch-glow" aria-label="Toggle">
<input type="checkbox" />
<span class="nuda-ios-switch-glow__track">
<span class="nuda-ios-switch-glow__thumb"></span>
</span>
</label>CSS
/* ── iOS Switch Glow ─────────────────────────────────────────
Customize:
--nuda-isg-on : on-state track color
--nuda-isg-glow : glow color
──────────────────────────────────────────────────────────── */
.nuda-ios-switch-glow {
--nuda-isg-on: #e4ff54;
--nuda-isg-glow: rgba(228, 255, 84, 0.6);
display: inline-flex;
cursor: pointer;
}
.nuda-ios-switch-glow input {
position: absolute;
width: 1px; height: 1px;
margin: -1px;
clip: rect(0, 0, 0, 0);
overflow: hidden;
}
.nuda-ios-switch-glow__track {
position: relative;
display: inline-block;
width: 54px;
height: 30px;
border-radius: 99px;
background: #2a2a32;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nuda-ios-switch-glow__thumb {
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #fafafa;
transform: translateX(0);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nuda-ios-switch-glow input:checked + .nuda-ios-switch-glow__track {
background: var(--nuda-isg-on);
box-shadow: 0 0 14px var(--nuda-isg-glow), 0 0 30px rgba(228, 255, 84, 0.3);
}
.nuda-ios-switch-glow input:checked + .nuda-ios-switch-glow__track .nuda-ios-switch-glow__thumb {
transform: translateX(24px);
background: #09090b;
}
.nuda-ios-switch-glow input:focus-visible + .nuda-ios-switch-glow__track {
outline: 2px solid var(--nuda-isg-on);
outline-offset: 3px;
}
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.nuda-ios-switch-glow__track,
.nuda-ios-switch-glow__thumb { transition: none; }
}How to use iOS Switch Glow
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.