Micro Tools
Advertisement

Toggle styler

Design a custom toggle switch: size, on and off colors, knob style and animation speed. Click the live preview to flip it, then copy the CSS.

Toggle style

Click the preview toggle to flip it on and off.

Preview and CSS
Advertisement

Building a toggle from a button

The accessible pattern is a button with role="switch" and aria-checked, not a div. Keyboard users can tab to it and flip it with space, and screen readers announce it as a switch. The knob is an absolutely positioned span that slides with a left transition.

Why the knob math matters

The knob sits 4px from each edge, so its travel distance is width minus knob size minus 8px. Getting this formula right keeps the knob perfectly inset at both ends at any size, which is what separates a polished toggle from a janky one.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Toggle Styler FAQs

What is the best toggle size for mobile?
At least 48px wide and 28px tall so thumbs can hit it reliably. This tool starts at 64 by 35px, a comfortable default that also leaves room for the sliding knob.
Should toggles have labels?
Yes. A toggle without a text label is ambiguous: users cannot tell what turning it on does. Pair every toggle with a visible label and use the switch only as the control.
How fast should the toggle animation be?
0.2 to 0.3 seconds feels snappy and physical. Slower than 0.5s feels laggy; instant with no transition feels broken. This tool defaults to 0.25s.
Can I use a checkbox instead of a button?
You can style a checkbox with appearance: none, but the button plus role="switch" pattern announces state changes more reliably across screen readers. Either is acceptable if labeled well.
Why does my toggle knob look off-center?
The knob is vertically centered by matching top offset to the track padding. If you change the track height without updating the knob size formula, the 4px rhythm breaks and the knob drifts.
Advertisement