ToolsRail
Home
CSS Shadow
CSS Text Formatter
Other Tools
CSS Outline Generator
CSS Ribbon Generator
CSS Transform Generator
Home
CSS Tools
CSS Toggle Switch Generator
Dark Mode
Customize Your Toggle Switch
Switch Size
Width (px)
Controls the width of your toggle switch
40px
60px
120px
Height (px)
Controls the height of your toggle switch
20px
34px
60px
Colors
Background Color (Off State)
The background color when toggle is off
Active Color (On State)
The background color when toggle is on
Handle Color
The color of the toggle switch handle
Style Options
Toggle Style
Choose between rounded or square toggle design
Rounded
Square
Labels
Show ON/OFF Labels
ON Label
OFF Label
Icons
Show Icons in Toggle
ON Icon
Check
Sun
Power
Moon
Thumbs Up
OFF Icon
X Mark
Moon
Power
Sun
Thumbs Down
Effects
Hover Effect
Add a subtle glow effect on hover
Animation Speed
Control how fast the toggle transitions
Fast (0.2s)
Normal (0.4s)
Slow (0.8s)
Additional Options
Show Disabled State
Preview the disabled appearance of toggle
Theme Support
Include Dark Mode Support
Add CSS for dark mode compatibility
Live Preview
OFF
ON
Generated Code
Copy Code
/* Generated code will appear here */
Copied!