Generate CSS toggle switches with custom size, colors and animation. Preview the switch live and copy the HTML and CSS code. Free online generator.
About this tool
Generate a CSS toggle-switch appearance with configurable dimensions and colors.
How to use CSS Switch Generator
- Set Width, Height, Knob inset and Transition.
- Choose On, Off and Knob colors and optionally enable Square style.
- Copy the HTML and CSS and connect the control to your application setting.
Worked example
Use distinct on and off backgrounds for a notification preference switch.
Will copying this save a preference?
No. The generated appearance does not implement storage or a server update.
Is color enough to show on and off?
Use the knob position and a clear label too, and verify keyboard interaction and focus in the final page.
Explore CSS Tools · More practical guides