Design und Assets
Toggle Switch CSS Generator
Erzeuge CSS toggle switch styles.
Eingabe
Toggle Switch CSS Generator
toggle switchcssuiform
Ausgabe
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
Ähnliche Tools
Floating Label Input CSS Generator
Erzeuge floating label input CSS.
Gradient Border CSS Generator
Erzeuge gradient border CSS styles.
Pricing Card CSS Generator
Erzeuge pricing card CSS styles.
Accordion CSS Generator
Erzeuge accordion panel CSS.
Avatar Stack CSS Generator
Erzeuge overlapping avatar stack CSS.
Border Radius Generator
Erzeuge border-radius CSS aus corner values.