FlipSwitch Generator

Design beautiful, accessible toggle switches with live preview and ready-to-use code.

Customize Your Switch

Load Preset: Default Subtle Sharp Pill

Active Color

Off Color

Thumb Color

Width (px) Min: 40, Max: 200

Thumb Size (%) Min: 50, Max: 95

Height Ratio (%) Min: 30, Max: 70

Border Radius (px) Min: 0, Max: 50

Thumb Shadow None Small (0 2px 4px) Medium (0 4px 8px) Large (0 6px 12px)

Transition (s) Min: 0.1, Max: 1.5

Preview & Code

Generated CSS

Required HTML

Copied!