47 CSS Toggles & Switches44 / 47

Pure CSSMIT licensed

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.

Published Updated

Live Demo
Try it

The code

<label class="tgl-44">
  <input class="tgl-44__input" type="checkbox" checked>
  <span class="tgl-44__track" aria-hidden="true">
    <span class="tgl-44__thumb"></span>
  </span>
  <span class="tgl-44__label">Bluetooth</span>
</label>
.tgl-44 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 15px;
  color: #1a1a1f;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 20px;
  background: #f2f2f7;
  box-sizing: border-box;
}

.tgl-44__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.tgl-44__track {
  position: relative;
  width: 51px;
  height: 31px;
  background: #e5e5ea;
  border-radius: 999px;
  transition: background 0.25s ease;
}

.tgl-44__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);
}

.tgl-44__input:checked ~ .tgl-44__track {
  background: #34c759;
}

.tgl-44__input:checked ~ .tgl-44__track .tgl-44__thumb {
  transform: translateX(20px);
}

.tgl-44__input:focus-visible ~ .tgl-44__track {
  outline: 2px solid #0a84ff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tgl-44__track,
    .tgl-44__thumb {
    transition: none;
  }
}
/* No JavaScript — iOS geometry with light-surface color tuning; the thumb slides on transform:translateX inside a white card surface. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Toggles & Switche from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: iOS Light Mode
Source: https://codefronts.com/components/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.
## HTML
```html
<label class="tgl-44">
  <input class="tgl-44__input" type="checkbox" checked>
  <span class="tgl-44__track" aria-hidden="true">
    <span class="tgl-44__thumb"></span>
  </span>
  <span class="tgl-44__label">Bluetooth</span>
</label>
```
## CSS
```css
.tgl-44 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 15px;
  color: #1a1a1f;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 20px;
  background: #f2f2f7;
  box-sizing: border-box;
}

.tgl-44__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.tgl-44__track {
  position: relative;
  width: 51px;
  height: 31px;
  background: #e5e5ea;
  border-radius: 999px;
  transition: background 0.25s ease;
}

.tgl-44__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);
}

.tgl-44__input:checked ~ .tgl-44__track {
  background: #34c759;
}

.tgl-44__input:checked ~ .tgl-44__track .tgl-44__thumb {
  transform: translateX(20px);
}

.tgl-44__input:focus-visible ~ .tgl-44__track {
  outline: 2px solid #0a84ff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tgl-44__track,
    .tgl-44__thumb {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — iOS geometry with light-surface color tuning; the thumb slides on transform:translateX inside a white card surface. */
```

How this works

The same 51×31 iOS geometry as demo 34, re-tuned for light surfaces: opaque #e5e5ea off-track (the translucent dark-surface gray would vanish on white), signature green on-state, and the label shipped inside a white card with a soft shadow — exactly how the control lives in a real light-mode settings screen, and why the demo includes its own surface.

Thumb slide is transform:translateX(20px) on the standard curve with the contained contact shadow. This pairing with demo 34 demonstrates the one real difference between iOS light/dark toggles: only the off-track color changes.

Make it yours

  • Drop the card wrapper when embedding in an already-light layout.
  • Swap green for the setting's tint color (iOS allows per-app tinting).
  • Stack several rows into a grouped list — see demo 23 for the full pattern.
  • Add the :active thumb stretch from demo 01.

Gotchas — read before shipping

  • Off-state must be the opaque light gray on light surfaces — the dark-mode translucent gray reads as disabled here.
  • Keep the white thumb's contact shadow: white-on-light needs it to define the edge.
  • The card is part of the demo; screenshot it with the surface or the tuning looks wrong.

Browser support

ChromeSafariFirefoxEdge
26+6.1+16+26+

Transforms + sibling :checked; effectively universal.

Techniques used in this demo

:focus-visibleMDN ↗box-shadowMDN ↗aria-* attributesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →