Switch

CSS toggle switch generator

Design an iOS-style toggle with on/off colors and size, then copy HTML + CSS.

Width: 56pxOn colorOff color

HTML + CSS

<label class="c-switch">
  <input type="checkbox" checked />
  <span class="c-switch__track">
    <span class="c-switch__thumb"></span>
  </span>
</label>

<style>
.c-switch {
  display: inline-flex;
  cursor: pointer;
}
.c-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.c-switch__track {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 31px;
  background: #e5e7eb;
  border-radius: 16px;
  transition: background 0.2s ease;
}
.c-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 25px;
  height: 25px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.c-switch input:checked + .c-switch__track {
  background: #34c759;
}
.c-switch input:checked + .c-switch__track .c-switch__thumb {
  transform: translateX(25px);
}
.c-switch input:focus-visible + .c-switch__track {
  outline: 2px solid #34c759;
  outline-offset: 2px;
}
</style>

Generated locally in your browser.

CSS

CSS toggle switch generator

Details

How to use CSS toggle switch generator

What the tool does, how to run it, and what to expect from the result.

How to build a CSS toggle switch

A toggle switch is a checkbox with different paint and a different promise. The paint is a track and a sliding thumb; the promise is that flipping it takes effect right now, with nothing to confirm. Keep the native input underneath so keyboard, form, and screen-reader behaviour come for free.

This generator emits that markup and CSS. Set one width and the height, thumb size, and travel distance are derived from it, so the proportions stay correct at any size.

Set the width between 36px and 96px. Everything else is derived from it.
Pick the on colour and the off colour.
Copy the HTML and CSS snippet and move the styles into your stylesheet.
Add role="switch" to the input so screen readers announce on and off rather than checked and unchecked.
Wire the change event to apply the setting immediately, with no Save step.

Tips

Getting a better result out of CSS toggle switch generator

Specific settings and thresholds, not general advice.

A toggle switch should apply immediately, with no Save button. That is the convention users have learned from iOS and Android system settings. If your change needs confirming, it is a checkbox in a form, not a switch, and dressing it as a switch will lose you data.
The generated geometry is derived from one number: height is 56% of the width, the thumb is height minus 6px, and the travel distance is width minus thumb minus 6. That is why there is a single width slider (36px to 96px) and no separate height field, and why the proportions stay right at any size.
As with a checkbox, the real <input type="checkbox"> stays in the DOM and is hidden with opacity 0, not display: none, so tab order, form submission, and screen-reader announcement all still work. The visual switch is a sibling styled from the :checked state.
A switch on its own does not announce itself as a switch. Add role="switch" to the input and screen readers will say 'on' and 'off' rather than 'checked' and 'unchecked', which matches what a sighted user sees.
The default on colour is #34c759, the iOS system green. Green as the only signal that something is on is a problem for red-green colour blindness, which affects around 8% of men, so make sure the thumb position, not only the colour, carries the state. It does here.

Limits

What CSS toggle switch generator does not do

The honest boundary, so you do not lose time finding it yourself.

One width control. Height, thumb size, and travel are all derived from it.
Two colours: on and off. The thumb is always white with a fixed shadow.
No label text, no on/off icons inside the track, and no disabled or hover state.
No role="switch" in the emitted markup, which you should add yourself.

At a glance

Who CSS toggle switch generator is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Front-end developers building toggle switches.

Ideal for

Using the css toggle switch generator without installing anything or signing up.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

When should I use a switch instead of a checkbox?

Use a switch when the change takes effect immediately and represents an on or off state, like a settings toggle. Use a checkbox when the value is part of a form that gets submitted, or when it is one of several options. A switch inside a form with a Save button is a contradiction, and users will assume it already saved.

How does the toggle work under the hood?

It is a hidden native checkbox plus two spans. The CSS sibling selector input:checked + .c-switch__track changes the track colour and translates the thumb by the calculated travel distance. There is no JavaScript, so the state lives in the input, which means it submits with the form and works with the keyboard by default.

Why is the thumb size set automatically?

Because a switch has proportions, not independent dimensions. The height is 56% of the width, the thumb is the height less a 3px inset on each side, and the travel is whatever is left. Exposing all four as separate sliders would let you build a switch whose thumb does not fit its track.

Is the switch accessible to screen readers?

Partly. The hidden native input keeps it keyboard operable and announced, but by default a screen reader will call it a checkbox, checked or unchecked. Add role="switch" to the input and it will be announced as a switch that is on or off, which matches what a sighted user perceives.

Can I put On and Off text inside the track?

Not from the generator, and it is a few lines to add: give the track a ::before and ::after with the text, position them at each end, and swap their opacity on :checked. Be careful with contrast, since white text on the default green track is around 2.3:1 and fails WCAG for small text.

Recommendations

Nearby tools from the catalog that fit the same job or workflow.

CSS

UtilityCSS

CSS Button Generator

Generate CSS buttons

Design a CSS button with color, radius, and padding controls, and copy the styles. Live preview and copyable CSS, in your browser.

CCG

UtilityCSS

CSS checkbox generator

CSS

Design a styled custom checkbox with color, size, and radius, then copy the HTML and CSS. Free, in your browser, nothing is uploaded.

CSS

UtilityCSS

CSS Gradient Generator

Generate CSS gradients

Create linear and radial CSS gradients with custom colors and angle. Live preview and copyable CSS, in your browser.

CAG

UtilityCSS

CSS Animation Generator

CSS

Build a CSS keyframes animation visually with presets and timing controls, then copy the code. Free, in your browser, nothing is uploaded.

CBP

UtilityCSS

CSS background pattern generator

CSS

Generate stripe, dot, grid, and checkerboard CSS patterns with color and size controls. Free, in your browser, nothing is uploaded.

CSS

UtilityCSS

CSS Border-Radius Generator

Generate CSS border-radius

Set each corner radius independently and preview the rounded shape live. Live preview and copyable CSS, in your browser.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

iPhone
Android
Macsoon
Windowssoon

Get it on the App Store Get it on Google Play All platforms & pricing