CSS Toggle Switch Generator

How it works

Type the text that should sit next to the switch into the left pane, for example "Enable notifications". On the right you get a <style> block and a <label> block; paste both into your page and you have a working on/off switch with no JavaScript. Underneath is a real checkbox: it is invisible but still focusable, so people can reach it with Tab, flip it with the space bar, hear "on/off" in a screen reader, and the value is sent with the form. At a width of 52 pixels the switch is 30 pixels tall and the white knob slides 22 pixels to the right when on; the summary line shows these sizes. Enter your brand colour as a HEX code. The custom checkbox style turns the same structure into a square with a tick, and if you choose a light colour the tick is drawn dark so it stays visible. Download saves a PNG preview of both states.

This tool is also known as css toggle switch generator, toggle switch css, css switch button, custom checkbox css, css checkbox generator, ios toggle css.

What is Toggle switch?

A toggle switch is the sliding on/off control known from phone settings screens. HTML has no dedicated element for it, so it is almost always a checkbox restyled with CSS. People expect a switch to take effect immediately, without a separate Save button, which is the main reason to choose it over a plain checkbox.

What is :focus-visible?

:focus-visible is a CSS selector that matches when an element receives focus from the keyboard, or another way where a focus ring is useful. Most browsers do not match it on a mouse click. Keyboard users see the ring, mouse users do not get a stray outline on the button they clicked. It is supported since Chrome 86, Firefox 85 and Safari 15.4.

Checkbox vs toggle switch: what is the difference?

In code both are the same <input type="checkbox">; the difference is the look and the promise. A checkbox marks a choice that is usually submitted with a button at the end of a form. A switch turns a setting on or off and signals that the change applies right away. For screen readers a switch gets role="switch" and a checkbox does not; this tool follows that rule for both styles.

The catch: display:none removes the checkbox from the keyboard

Many snippets online hide the real checkbox with display:none or visibility:hidden. It looks the same, but the input also disappears from the tab order and from screen readers: mouse users can flip the switch, keyboard and screen-reader users cannot. This tool hides the input with opacity:0 at 1 pixel, so it is invisible but still accessible.

The second trap is the focus indicator. Writing outline:none and nothing else leaves keyboard users lost. The generated code includes a :focus-visible rule: mouse clicks show no ring, keyboard focus shows a ring in your chosen colour.

Switch or checkbox?

Both hold the same on/off value but make a different promise:

• Setting takes effect immediately (dark mode, notifications) → switch
• Choice is sent with a form and a Save button (I accept the terms) → checkbox
• Several items can be picked from a list → checkbox
• Should look like a mobile app setting → rounded switch
• Corporate interface with sharp edges → square switch

Frequently asked questions

Does this really work without JavaScript?

Yes. The browser's own checkbox does the toggling; the CSS only changes the colour and knob position based on :checked. If something should happen when the value changes, such as saving the setting, attach your own JavaScript event to the input.

What does role="switch" do?

It tells screen readers that the control is an on/off switch rather than a checkbox, so users hear "off" instead of "not checked". The custom checkbox style leaves the role out, because there the element really is a checkbox.

Can I use several switches on one page?

Yes. Add the <style> block once, then copy the <label> block as often as you need and change the text. Add checked to the input of any switch that should start in the on position.

What does Download save?

A PNG preview showing the off and on state one above the other, handy for design approval or documentation. Use Copy output for the code itself.