On/Off FlipSwitch

Generate pure CSS3 On/Off flipswitches with animated transitions.

More freebies
A bug in Opera overflows content outside of the container's curved corners. Switches with a large border-radius setting may look broken.
IE9+ fully supported.As IE6-8 do not support the CSS :checked selector, the switch will not reflect the "ON" state of the checkbox. Although this can be solved with Javascript, it is outside of the scope of this generator.


Active state

Inactive state




Get the CSS

Get the HTML

Please contact us with your ideas, thoughts, questions or for anything else on how we can improve this tool. Thanks! suggestions@proto.io