CSS Toggle Switch Generator

Design custom on/off toggle switches with pure CSS. Control size, colors, knob shape and transition speed. No JavaScript required — pure CSS checkbox hack.

Presets

Size
52px
28px
3px

Colors — ON state

Colors — OFF state

Shape
99px
99px

Animation
0.25s

Focus Ring

Live Preview

OFF state
ON state
Interactive ← click to test
Disabled

Generated Code