Design & Assets
Toggle Switch CSS Generator
Generate CSS toggle switch styles.
Input
Toggle Switch CSS Generator
toggle switchcssuiform
Output
Toggle Switch CSS Generator
.switch {
position: relative;
width: 60px;
height: 29px;
border-radius: 999px;
background: #cbd5e1;
transition: background 0.3s ease;
}
.switch::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: calc(29px - 8px);
height: calc(29px - 8px);
border-radius: 999px;
background: white;
box-shadow: 0 6px 14px rgba(15,23,42,0.18);
transition: transform 0.3s ease;
}
.switch.active {
background: #2563eb;
}
.switch.active::after {
transform: translateX(30px);
}Live preview
Live canvas
Related tools
Floating Label Input CSS Generator
Generate floating label input CSS.
Gradient Border CSS Generator
Generate gradient border CSS styles.
Pricing Card CSS Generator
Generate pricing card CSS styles.
Accordion CSS Generator
Generate accordion panel CSS.
Avatar Stack CSS Generator
Generate overlapping avatar stack CSS.
Border Radius Generator
Generate border-radius CSS from corner values.