ToolsRail
Home
Shadow Generator
Tailwind Font Generator
About
Home
Shadow Generator
Tailwind Font Generator
About
Home
Tailwind Tools
Tailwind Switch Generator
Create beautiful, customizable toggle switches using Tailwind CSS
Customization Options
Toggle Size
Choose the overall size of your toggle switch
Small (w-8 h-4)
Medium (w-10 h-6)
Large (w-14 h-8)
Extra Large (w-16 h-10)
Toggle Shape
Select the shape of your toggle switch
Rounded (rounded-full)
Slightly Rounded (rounded-lg)
Squared (rounded-md)
ON Background Color
Select background color when toggle is ON
Green (bg-green-500)
Blue (bg-blue-500)
Purple (bg-purple-500)
Red (bg-red-500)
Yellow (bg-yellow-500)
Indigo (bg-indigo-500)
Pink (bg-pink-500)
OFF Background Color
Select background color when toggle is OFF
Light Gray (bg-gray-200)
Gray (bg-gray-300)
Dark Gray (bg-gray-400)
Light Red (bg-red-200)
Light Blue (bg-blue-200)
Knob Size
Select the size of the toggle knob/thumb
Small (w-3 h-3)
Medium (w-4 h-4)
Large (w-6 h-6)
Extra Large (w-8 h-8)
Knob Color
Select the color of the toggle knob
White (bg-white)
Light Gray (bg-gray-100)
Dark Gray (bg-gray-800)
Blue (bg-blue-600)
Green (bg-green-600)
Animation
Choose animation speed for knob movement
Fast (duration-100)
Medium (duration-200)
Slow (duration-300)
Very Slow (duration-500)
Add Border
Add a border to the toggle switch
Light (border-gray-300)
Medium (border-2 border-gray-400)
Heavy (border-4 border-gray-500)
Add Shadow
Add shadow effect to the toggle switch
Light (shadow)
Medium (shadow-md)
Large (shadow-lg)
Hover Effect
Add hover effect to the toggle switch
Opacity (hover:opacity-80)
Scale Up (hover:scale-105)
Shadow (hover:shadow-lg)
Include Disabled Style
Generate classes for disabled state
Include Labels
Add ON/OFF text labels next to switch
Include Icons
Add icons inside the toggle knob
Sun/Moon (Light/Dark)
Check/X (Yes/No)
Power Icon
Style Type
Choose between solid fill or outline style
Solid
Outline
Neumorphic Style
Apply neumorphic design style
Responsive Sizing
Adjust toggle size based on screen size
Preview
Toggle Dark/Light Mode
OFF
ON
Click the toggle to test
OFF
Generated Code
Copy Code