Free tool

CSS Toggle Switch Generator

Animated switches without a single line of JavaScript: accessible checkbox + animated pseudo-element. Tune everything and copy the code.

<label class="switch">
  <input type="checkbox" checked />
  <span class="slider"></span>
</label>

.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 30px;
  transition: background 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.switch input:checked + .slider {
  background: #7c3aed;
}

.switch input:checked + .slider::before {
  transform: translateX(26px);
}

Built by

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

I develop web apps, digital tools and full projects — from design to deployment.

GitHubLinkedInBuy me a coffee
Contact me

The on/off switch is one of the most poorly re-implemented components: heavy libraries for something three CSS rules solve. The canonical pattern uses a real checkbox (keyboard and screen-reader accessible) visually hidden, a span drawing the track and its ::before pseudo-element as the knob; the :checked + .slider selector slides it via transform. This tool generates that HTML and CSS with your exact measurements —the knob always stays proportional to the height— and your state colors, plus a working demo where you flip the switches before copying. Being a native input, it keeps working with Tab and Space without JavaScript.

Features

  • ✓No JavaScript: checkbox + label pattern
  • ✓Any size with auto-proportional knob
  • ✓On, off and knob colors
  • ✓Adjustable transition duration
  • ✓Interactive demo inside the tool

How do I create a CSS toggle?

  1. 1

    Set size and colors

    Width, height and the three switch colors.

  2. 2

    Try the demo

    Flip the sample switches to feel the animation.

  3. 3

    Copy HTML + CSS

    The button copies both snippets together.

  4. 4

    Wire your logic

    The checkbox is still a regular input: listen to change as usual.

Frequently asked questions

Is it keyboard accessible?

Yes: underneath the styling sits a native checkbox, so Tab focuses it and Space toggles it. You can add :focus-visible styles on .slider for a visible focus ring.

Why use transform instead of left?

transform: translateX animates on the compositor without layout recalcs: steady 60fps even on modest phones, while animating left forces reflow every frame.

Can I place it inside a form?

It's a standard checkbox: it respects name, value, required and disabled like any other input and submits its value with the form.

Related tools

Neumorphism Generator

Soft UI with dual shadow and light angle.

CSS Loader Generator

Animated spinners in pure CSS.

Glassmorphism Generator

Frosted-glass effect with blur and transparency.

CSS Box Shadow Generator

CSS shadows with multiple layers and live preview.

Embed CSS Toggle Switch Generator on your site

Add CSS Toggle Switch Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/css-toggle-switch-generator"
  width="100%"
  height="700"
  frameborder="0"
  title="CSS Toggle Switch Generator — miguelacm.es"
></iframe>
View embed in new tab →
View source on GitHub