How do I create a CSS toggle without JavaScript?

Use an with a and CSS: hide the checkbox, style the label as a pill, and use input:checked + label to change the appearance. Since the label toggles the checkbox state, no JavaScript is needed. The same technique works for accordion menus.

How do I animate a CSS toggle switch?

Use CSS transition on the label and its ::after pseudo-element: transition: background 0.2s on the track and transition: transform 0.2s on the thumb. The input:checked selector triggers the state change, and CSS transitions animate smoothly between states. No JavaScript needed.

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

Width52px

Height28px

Knob gap3px

Colors — ON state

Track ON

Knob ON

Colors — OFF state

Track OFF

Knob OFF

Shape

Track Radius99px

Knob Radius99px

Animation

Transition0.25s

Easing

Focus Ring

Focus color

Live Preview

OFF state

ON state

Interactive ← click to test

Disabled

Generated Code

📦 UIFlow Components Pack

28 copy-paste UI components (cards, toggles, inputs, modals…). One-time, €12.

✓ Matching set, tested together · ✓ Commercial & client projects OK · ✓ Instant download

€12 →

🎁 Not ready to buy? Get 10 free CSS presets →

CSS Toggle Switch Generator

Live Preview

Generated Code

Related Tools