Developer Tools New Tool

Free Online CSS Toggle Switch Generator

Build an iOS style toggle switch from a real checkbox and a label, never a div. Set the track width and height, the knob size and inset, the off and on colours, the transition, and an optional tick or cross in the knob. The output keeps the checkbox focusable and adds a focus ring.

Free Forever Nothing Uploaded Real checkbox underneath Runs in your browser

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Toggle Switch Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

These are real checkboxes. Click one, or press Tab to reach it and the space bar to change it. The focus ring you see is the one the generated CSS writes.

CSS

Track and knob Class name Track by px Knob px Inset px Track radius px

Colours and motion Off On Knob Transition ms

Mark, label and focus ring Mark in the knob Mark colour Label Label size px Focus ring px

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Toggle Switch

A few steps, and nothing is uploaded.

Size the track and knob The track is the rounded rectangle and the knob is the circle inside it. The inset is the space between them, and the knob is capped so it always fits: if you ask for a knob taller than the track allows, the tool reduces it rather than letting it spill out.

Pick the two states An off colour, an on colour and a knob colour. The generated CSS moves between the two with the transition you set, and the travel distance is worked out from the track width, the knob size and the inset, so the knob always lands flush.

Add a mark if you want one The knob can carry a tick when the switch is on, or a cross when off and a tick when on. It is drawn with a pseudo-element and a unicode escape, so there is no icon font and no image to load.

Copy the set The output holds the visually hidden input rule, the track, the knob, the checked state, the focus ring and the disabled state, with the HTML it expects as a comment at the top. The input stays a real checkbox in every case.

What to Know About Toggle Switches

Including why the checkbox has to stay a checkbox.

The checkbox has to stay a real checkbox. Hide it with the visually hidden pattern, which is absolute positioning with a one pixel box and clip-path: inset(50%), never with display: none or visibility: hidden. Those two remove the input from the tab order entirely, so the switch cannot be reached or changed by keyboard and the form no longer submits it. The generated CSS uses the safe pattern, keeps the input focusable, and puts the focus ring on the track so you can see where you are.

appearance: none on its own is not enough. Styling the checkbox itself with appearance none leaves you fighting the platform for the tick, the hit area and the focus ring, and the result differs between browsers. The pattern here keeps the input as the state and the sibling span as the appearance, which is predictable everywhere. The input still needs to be present and focusable, which is why it is hidden visually rather than removed.

A switch means the change happens now. A checkbox in a form is a value you are about to submit, and a switch is a setting that takes effect as soon as it moves. If your control needs a Save button afterwards, use a plain checkbox instead, because a switch that has not actually done anything yet is misleading. Label it with the thing being controlled, not with the word On, since the switch itself says which way it is.

This page writes one switch and does not read CSS back. There is no size scale, no loading or indeterminate state, no group of switches with shared labelling, no right to left variant, no dark mode variant and no parsing of an existing rule set into the controls. It does not check the contrast of your on and off colours either, and a pale grey off state against a white page is easy to miss.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

A real checkbox The input stays in the page, focusable, and submits with the form.

Safe hiding The visually hidden pattern, not display none, so Tab still reaches it.

Switches you can click Off, on and disabled, all live in the preview.

Optional mark A tick, or a cross and a tick, drawn without an icon font.

Paste ready output The whole set with the expected HTML as a comment at the top.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Toggle Switch Generator

The toggle switch is the most commonly rebuilt control on the web and the one most often rebuilt badly. The usual failure is a div with a click handler, which gives you something that looks right and cannot be reached by keyboard, is silent to a screen reader and sends nothing when the form is submitted. A switch is a boolean, and the web already has a boolean input, so the right approach is to style that.

This page builds the switch from a real <input type="checkbox"> inside a <label>, with a sibling span as the track and a pseudo-element as the knob. The input is hidden visually with the standard pattern rather than removed, so it keeps its place in the tab order, the space bar still works, the label still toggles it, and the browser still reports its state. Everything visible is CSS reacting to :checked.

The part that is easy to get wrong is the focus ring. Because the input is invisible, an outline on the input is invisible too, and a lot of switch implementations therefore appear to have no focus style at all. The generated CSS puts a :focus-visible ring on the track through the sibling selector, so the ring appears around the thing you can actually see. That rule is written every time, and the controls only change its colour and width.

Frequently Asked Questions

Keyboard access, hiding the input, labels and instant saving.

Because display none takes the input out of the tab order, and so does visibility hidden. The switch then cannot be focused or changed with the keyboard, which makes it unusable for anyone who does not use a pointer. The visually hidden pattern keeps the element rendered at one pixel and clipped, so it is invisible but still a functioning focusable control.

Not necessarily. A checkbox already conveys checked and unchecked, which is the same information, and it is announced in terms every screen reader user knows. Adding role="switch" changes the announcement to on and off, which reads more naturally for a setting, and support is good in current screen readers. Either is defensible; what is not defensible is a div with no role at all.

Wrap the input and the track in a label along with the text, as the generated markup does, or use a separate label with a for attribute matching the input id. Name it after the setting, for example Email notifications, rather than On or Enabled. Do not put visible On and Off text on either side of the track as the only label, because then nothing names what is being switched.

The travel distance has to be the track width minus the knob size minus twice the inset, and if any of those change the transform has to change with them. This tool works that out for you and also caps the knob so it cannot be taller than the track allows. If you edit the numbers by hand afterwards, recalculate the translateX value or the knob will overshoot or stop short.

A short transition of around 150 to 250 milliseconds helps, because it shows the knob travelling and makes the change feel like a physical movement rather than a redraw. Longer than that and the control feels slow to respond. Only the transform and the background colour are animated here, both of which are cheap, so the switch stays responsive even on a busy page.