Log in Sign up free

CSS Toggle Switch Generator

Design accessible on/off toggle switches in pure CSS — size, colours and shape — and copy the HTML and CSS.

Runs instantly in your browser — results update as you type.

How do I make a toggle switch with HTML and CSS?

Set the width, height, colours for on and off, the knob colour, the gap and the shape, then click the live preview to test it. The code uses a real checkbox with role="switch", so it works with the keyboard, screen readers and forms without any JavaScript.

Using the switch

Read its state like any checkbox: input.checked in JavaScript or the field value when the form is submitted. Use a clear label that describes what turns on — "Dark mode", "Email notifications".

Accessibility checklist

  • Keep the visible label next to the switch.
  • Make sure the on and off colours differ in more than colour alone (the knob position shows the state).
  • Keep the focus outline for keyboard users.

Frequently asked questions

Does it need JavaScript?

No, it is pure HTML and CSS.

Can I have several switches?

Yes, reuse the same class on as many labels as you like.

Is it free?

Yes.