CSS Toggle Switch: Complete Guide + 5 Free Examples (2026)

CSS toggle switches replace the default checkbox with a beautiful sliding switch. No JavaScript needed for the core behavior.

The HTML Structure

<label class="toggle">
  <input type="checkbox" id="dark-mode">
  <span class="toggle-track"></span>
  <span class="toggle-label">Dark Mode</span>
</label>

The Core CSS

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

.toggle-track {
  display: inline-block;
  width: 52px; height: 28px;
  border-radius: 14px;
  background: #333;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
}

.toggle-track::before {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  left: 3px; top: 3px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

input:checked + .toggle-track { background: #e53e3e; }
input:checked + .toggle-track::before { transform: translateX(24px); }
input:focus-visible + .toggle-track { outline: 2px solid #e53e3e; outline-offset: 2px; }

Glassmorphism Variant

.toggle-glass .toggle-track {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
}

5 Free Toggle Styles

1. Standard dark mode toggle
2. Glassmorphism toggle
3. Neon glow toggle
4. iOS-style toggle
5. Minimal ink-fill toggle

All free at ProofMatcher Components.

Originally published at ProofMatcher Blog