Design e Recursos
Gerador de CSS para Toggle Switch
Gere estilos CSS para toggle switches.
Entrada
Gerador de CSS para Toggle Switch
toggle switchcssuiform
Saída
Gerador de Toggle Switch CSS
.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);
}Ao vivo Prévia
Live canvas

