CSS Toggle Switch: 15 Beautiful Examples With Code (2026)

A CSS toggle switch is one of the most satisfying UI components to build — and one of the most searched. Whether you're building a dark mode switch, a settings panel, or a feature flag UI, this guide gives you 15 complete CSS toggle switch examples with copy-paste code. Pure CSS. No JavaScript required for the visuals.

TL;DR: Every toggle below uses only HTML + CSS. Copy the code, adjust the colors, and drop it in. Accessible :focus-visible styles included on every example.

What Is a CSS Toggle Switch?

A CSS toggle switch is a checkbox input styled to look like a physical on/off switch. It uses a hidden <input type="checkbox"> paired with a <label> and CSS :checked pseudo-class to animate between states — entirely without JavaScript.

They're used in: settings panels, dark mode toggles, feature flags, notification preferences, and form inputs. Explore ready-made toggle components in the ProofMatcher CSS UI components library.

CSS Toggle Switch Examples With Code

1. Classic iOS-Style Toggle

The standard pill-shaped toggle. Clean, universally recognizable.

<!-- iOS-style CSS toggle switch -->
<label class="toggle">
  <input type="checkbox">
  <span class="toggle__track"></span>
</label>

/* iOS-style toggle switch */
.toggle { display: inline-flex; align-items: center; cursor: pointer; }

.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle__track {
  position: relative;
  width: 52px; height: 28px;
  background: #d1d5db;
  border-radius: 9999px;
  transition: background 0.25s ease;
}

.toggle__track::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.toggle input:checked + .toggle__track { background: #22c55e; }
.toggle input:checked + .toggle__track::after { transform: translateX(24px); }

.toggle input:focus-visible + .toggle__track {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}

2. Dark Mode Toggle

/* Dark mode toggle — moon/sun icon inside */
.toggle-dark .toggle__track { background: #374151; width: 58px; height: 30px; }
.toggle-dark .toggle__track::before {
  content: '🌙';
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  transition: opacity 0.2s;
}
.toggle-dark .toggle__track::after {
  width: 24px; height: 24px; left: 3px; top: 3px;
  background: #f9fafb;
}
.toggle-dark input:checked + .toggle__track { background: #1e3a5f; }
.toggle-dark input:checked + .toggle__track::after { transform: translateX(28px); }
.toggle-dark input:checked + .toggle__track::before { content: '☀️'; left: 6px; right: auto; }

3. Glassmorphism Toggle

/* Glassmorphism toggle — works on gradient backgrounds */
.toggle-glass .toggle__track {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.toggle-glass .toggle__track::after { background: rgba(255,255,255,0.9); }
.toggle-glass input:checked + .toggle__track {
  background: rgba(99,102,241,0.5);
  border-color: rgba(99,102,241,0.6);
}

4. Gradient Track Toggle

/* Gradient track activates on check */
.toggle-grad .toggle__track { background: #e5e7eb; }
.toggle-grad input:checked + .toggle__track {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

5. Slim / Minimal Toggle

/* Ultra-slim toggle for dense UIs */
.toggle-slim .toggle__track {
  width: 40px; height: 20px;
  background: #d1d5db;
}
.toggle-slim .toggle__track::after {
  width: 16px; height: 16px;
  left: 2px; top: 2px;
}
.toggle-slim input:checked + .toggle__track::after { transform: translateX(20px); }
.toggle-slim input:checked + .toggle__track { background: #6366f1; }

6. Square Toggle

/* Square / rectangular toggle variant */
.toggle-square .toggle__track {
  border-radius: 6px;
  background: #374151;
}
.toggle-square .toggle__track::after {
  border-radius: 4px;
  background: #f9fafb;
}
.toggle-square input:checked + .toggle__track { background: #10b981; }
.toggle-square input:checked + .toggle__track::after { transform: translateX(24px); }

7. Label Toggle (ON/OFF Text)

/* Toggle with ON/OFF text inside track */
.toggle-label .toggle__track {
  width: 72px; height: 32px;
  background: #e5e7eb;
  border-radius: 9999px;
}
.toggle-label .toggle__track::before {
  content: 'OFF';
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px; font-weight: 700;
  color: #9ca3af; letter-spacing: 0.05em;
  transition: opacity 0.2s;
}
.toggle-label .toggle__track::after {
  width: 26px; height: 26px; left: 3px; top: 3px;
}
.toggle-label input:checked + .toggle__track { background: #22c55e; }
.toggle-label input:checked + .toggle__track::before {
  content: 'ON'; left: 10px; right: auto; color: #fff;
}
.toggle-label input:checked + .toggle__track::after { transform: translateX(40px); }

8. Neon Glow Toggle (Dark Mode)

/* Neon toggle for dark backgrounds */
.toggle-neon .toggle__track { background: #111; border: 1px solid #333; }
.toggle-neon .toggle__track::after { background: #555; }
.toggle-neon input:checked + .toggle__track {
  background: #0d0d0d;
  border-color: #39ff14;
  box-shadow: 0 0 10px rgba(57,255,20,0.4);
}
.toggle-neon input:checked + .toggle__track::after {
  background: #39ff14;
  transform: translateX(24px);
  box-shadow: 0 0 8px #39ff14;
}

9. Neumorphic Toggle

/* Neumorphic soft-UI toggle */
.toggle-neu .toggle__track {
  background: #e0e5ec;
  box-shadow: 4px 4px 8px #b8bec7, -4px -4px 8px #ffffff;
}
.toggle-neu .toggle__track::after {
  background: #e0e5ec;
  box-shadow: 2px 2px 4px #b8bec7, -2px -2px 4px #fff;
}
.toggle-neu input:checked + .toggle__track { background: #e0e5ec; }
.toggle-neu input:checked + .toggle__track::after {
  transform: translateX(24px);
  background: #6366f1;
  box-shadow: 0 0 8px rgba(99,102,241,0.5);
}

10–15. Quick Variant Pack

/* Red/danger toggle */
.toggle-danger input:checked + .toggle__track { background: #ef4444; }

/* Blue/primary toggle */
.toggle-primary input:checked + .toggle__track { background: #3b82f6; }

/* Amber/warning toggle */
.toggle-warning input:checked + .toggle__track { background: #f59e0b; }

/* Large toggle (accessibility) */
.toggle-lg .toggle__track { width: 68px; height: 36px; }
.toggle-lg .toggle__track::after { width: 28px; height: 28px; }
.toggle-lg input:checked + .toggle__track::after { transform: translateX(32px); }

/* Disabled state */
.toggle input:disabled + .toggle__track { opacity: 0.4; cursor: not-allowed; }

/* With transition bounce */
.toggle-bounce .toggle__track::after {
  transition: transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1);
}

CSS Toggle Switch Best Practices

Always wrap in a <label> — clicking the label activates the checkbox without JavaScript
Use :focus-visible not :focus — avoids focus ring on mouse click while keeping keyboard navigation accessible
Add aria-label when the toggle has no visible text label: <input type="checkbox" aria-label="Enable dark mode">
Minimum 44px touch target — wrap in a larger clickable area on mobile
Provide transition on the base state — not just :checked — so the off-transition also animates
Test color contrast — the thumb (knob) must contrast clearly against both off and on track colors

Pro tip: For a settings panel with multiple toggles, define CSS custom properties --toggle-on and --toggle-off at the root. Change the theme color in one place and all toggles update.

Use Cases

Dark mode switcher — The most common toggle use case. Pair with localStorage and a tiny JS snippet to persist preference.
Settings panels — Notification preferences, privacy controls, feature flags in SaaS dashboards.
Forms — Yes/No inputs where a checkbox feels too plain.
Admin dashboards — Enable/disable rows in data tables. Browse free admin dashboard templates with built-in toggle components.

Explore More ProofMatcher Resources

🔗 Browse the ProofMatcher CSS UI components library — live previews for every component
🔗 Download free website templates — all include pre-styled form components
🔗 Explore SaaS landing page templates — built with settings panels and toggle UIs
🔗 Dark mode website templates — designed for toggle-powered theme switching

Frequently Asked Questions

Can I build a CSS toggle switch without JavaScript?

Yes. All 15 examples above use zero JavaScript. The :checked CSS pseudo-class handles state. JavaScript is only needed if you want to persist the toggle state across page loads (e.g., with localStorage).

What's the difference between a checkbox and a toggle switch?

Functionally identical — both submit boolean values in forms. A toggle switch is a styled <input type="checkbox"> that looks like a physical switch. Use toggles for immediate-effect settings; use checkboxes in traditional form contexts.

How do I make a CSS toggle accessible?

Use a real <input type="checkbox"> (not a <div>), always pair with a <label>, include :focus-visible styles, and add an aria-label if there's no visible label text.

How do I animate the CSS toggle switch?

Add transition: transform 0.25s ease to the ::after pseudo-element (the knob). For a bounce effect, use cubic-bezier(0.34, 1.56, 0.64, 1) as the timing function.

Can I use a CSS toggle in a React or Vue project?

Absolutely. The CSS works in any framework. In React, bind checked and onChange props to state. The CSS classes and animation work identically.

Conclusion

A well-built CSS toggle switch requires no JavaScript, ranks high on usability, and adds a polished feel to any UI. The 15 examples above cover every style from iOS-standard to glassmorphism and neon glow — all accessible, all copy-paste ready.

For a full component library with live previews, visit ProofMatcher's CSS UI components. Need a full template with toggles integrated into a settings panel? Download a free template and customise it in minutes.

Premium Website Templates — Designer-Level UI for Modern Brands | ProofMatcher