Wi-Fi Toggle Tile: Pure CSS Toggle Switch

Wi-Fi Toggle Tile

A Control Center style tile: tap it and it fills with the accent, the Wi-Fi arcs light up from the inside out and the status line slides from Off to the network name.

Also known as: control center toggle css, quick settings tile, wifi toggle button.

Color Size 24px Dark background

HTML

<label class="tgl-wifi-toggle-tile">
  <input type="checkbox" role="switch" aria-label="Wi-Fi">
  <span class="tgl-wifi-toggle-tile-tile" aria-hidden="true">
    <span class="tgl-wifi-toggle-tile-icon">
      <svg viewBox="0 0 24 24">
        <path class="tgl-wifi-toggle-tile-arc" style="--i: 2" d="M3.51 8.76a12 12 0 0 1 16.98 0"/>
        <path class="tgl-wifi-toggle-tile-arc" style="--i: 1" d="M6.34 11.59a8 8 0 0 1 11.32 0"/>
        <path class="tgl-wifi-toggle-tile-arc" style="--i: 0" d="M9.17 14.42a4 4 0 0 1 5.66 0"/>
        <circle class="tgl-wifi-toggle-tile-dot" cx="12" cy="17.6" r="1.6"/>
      </svg>
    </span>
    <span class="tgl-wifi-toggle-tile-text">
      <span class="tgl-wifi-toggle-tile-title">Wi-Fi</span>
      <span class="tgl-wifi-toggle-tile-status">
        <span class="tgl-wifi-toggle-tile-off">Off</span>
        <span class="tgl-wifi-toggle-tile-on">Home</span>
      </span>
    </span>
  </span>
</label>

CSS

.tgl-wifi-toggle-tile {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
}
.tgl-wifi-toggle-tile input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-wifi-toggle-tile-tile {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 1.4em 0.45em 0.45em;
  border-radius: 1.6em;
  background: color-mix(in srgb, currentColor 10%, transparent);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tgl-wifi-toggle-tile-icon {
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 16%, transparent);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.4, 1.8, 0.5, 1);
}
.tgl-wifi-toggle-tile-icon svg {
  display: block;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.tgl-wifi-toggle-tile-arc {
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
.tgl-wifi-toggle-tile-dot {
  fill: currentColor;
  stroke: none;
}
.tgl-wifi-toggle-tile-text {
  display: grid;
  line-height: 1.2;
}
.tgl-wifi-toggle-tile-title {
  font-size: 0.72em;
  font-weight: 600;
}
.tgl-wifi-toggle-tile-status {
  display: grid;
  height: 1.2em;
  overflow: hidden;
  font-size: 0.62em;
  opacity: 0.75;
}
.tgl-wifi-toggle-tile-off,
.tgl-wifi-toggle-tile-on {
  grid-area: 1 / 1;
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.tgl-wifi-toggle-tile-on { transform: translateY(110%); }
.tgl-wifi-toggle-tile input:checked + .tgl-wifi-toggle-tile-tile {
  background: var(--c);
  color: #fff;
}
.tgl-wifi-toggle-tile input:checked + .tgl-wifi-toggle-tile-tile .tgl-wifi-toggle-tile-icon {
  background: #fff;
  color: var(--c);
  transform: scale(1.06);
}
.tgl-wifi-toggle-tile input:checked + .tgl-wifi-toggle-tile-tile .tgl-wifi-toggle-tile-arc {
  opacity: 1;
  transition-delay: calc(0.1s + var(--i) * 0.1s);
}
.tgl-wifi-toggle-tile input:checked + .tgl-wifi-toggle-tile-tile .tgl-wifi-toggle-tile-off { transform: translateY(-110%); }
.tgl-wifi-toggle-tile input:checked + .tgl-wifi-toggle-tile-tile .tgl-wifi-toggle-tile-on { transform: translateY(0); }
.tgl-wifi-toggle-tile:active .tgl-wifi-toggle-tile-tile { transform: scale(0.97); }
.tgl-wifi-toggle-tile input:focus-visible + .tgl-wifi-toggle-tile-tile {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  .tgl-wifi-toggle-tile, .tgl-wifi-toggle-tile *, .tgl-wifi-toggle-tile::before, .tgl-wifi-toggle-tile::after, .tgl-wifi-toggle-tile *::before, .tgl-wifi-toggle-tile *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwind CSS version

The same effect using Tailwind utility classes. No custom CSS or config needed.

<label class="group relative inline-flex cursor-pointer font-sans">
  <input type="checkbox" role="switch" aria-label="Wi-Fi" class="peer sr-only">
  <span aria-hidden="true" class="flex items-center gap-3 rounded-full bg-gray-500/10 py-2 pl-2 pr-7 transition-colors duration-300 active:scale-95 peer-checked:bg-blue-500 peer-checked:text-white peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-500">
    <span class="grid h-11 w-11 place-items-center rounded-full bg-gray-500/15 transition duration-300 ease-[cubic-bezier(.4,1.8,.5,1)] group-has-[:checked]:scale-105 group-has-[:checked]:bg-white group-has-[:checked]:text-blue-500">
      <svg viewBox="0 0 24 24" class="h-6 w-6 fill-none stroke-current stroke-[2.4] [stroke-linecap:round]">
        <path class="opacity-30 transition-opacity group-has-[:checked]:opacity-100 group-has-[:checked]:delay-300" d="M3.51 8.76a12 12 0 0 1 16.98 0"/>
        <path class="opacity-30 transition-opacity group-has-[:checked]:opacity-100 group-has-[:checked]:delay-200" d="M6.34 11.59a8 8 0 0 1 11.32 0"/>
        <path class="opacity-30 transition-opacity group-has-[:checked]:opacity-100 group-has-[:checked]:delay-100" d="M9.17 14.42a4 4 0 0 1 5.66 0"/>
        <circle class="fill-current stroke-0" cx="12" cy="17.6" r="1.6"/>
      </svg>
    </span>
    <span class="grid leading-tight">
      <span class="text-sm font-semibold">Wi-Fi</span>
      <span class="grid h-4 overflow-hidden text-xs opacity-75">
        <span class="[grid-area:1/1] transition-transform duration-300 group-has-[:checked]:-translate-y-full">Off</span>
        <span class="translate-y-full [grid-area:1/1] transition-transform duration-300 group-has-[:checked]:translate-y-0">Home</span>
      </span>
    </span>
  </span>
</label>

Customizing this snippet

Color: set --tgl-color on the element or a parent. Currently previewing #3b82f6.
Size: set --tgl-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 24px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Wi-Fi Toggle Tile

HTML

CSS

Tailwind CSS version

Customizing this snippet

Similar toggle switches