CSS Switch Generator
Create custom animated CSS-only toggle switches
CSS Switch Generator
Generate custom toggle switches with pure CSS.
Settings
Width: 48px
Height: 26px
Speed: 0.3s
Active Color
CSS
.switch {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: #e5e7eb;
border-radius: 26px;
transition: 0.3s;
}
.switch .slider::before {
content: '';
position: absolute;
height: 22px;
width: 22px;
left: 2px;
bottom: 2px;
background: white;
border-radius: 50%;
transition: 0.3s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background-color: #6366f1; }
.switch input:checked + .slider::before { transform: translateX(22px); }Related Tools in CSS Styling & Layout Generators
More browser-based utilities in this collection
Background Gradient
Generate CSS gradient backgrounds
Background Image
Generate CSS background image code
Blur
Generate CSS blur filter effects
Border Image
Generate CSS border-image properties
Border Radius
Generate CSS border-radius properties
Border
Generate CSS border properties
Box Shadow
Generate CSS box-shadow effects
Brightness
Generate CSS brightness filters