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.

Style

Random style | Reset to style default state

Active state

Inactive state

Switch

Labels

Sizing

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