Online CSS Switch Generator
Generate CSS for a toggle switch. Customize size, colors, and rounded style.
.switch-wrap {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.switch-wrap input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.switch-wrap .switch-track {
width: 44px;
height: 24px;
background: #d1d5db;
border-radius: 12px;
position: relative;
transition: background 0.2s;
}
.switch-wrap .switch-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20.4px;
height: 20.4px;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
.switch-wrap input:checked + .switch-track {
background: #2563eb;
}
.switch-wrap input:checked + .switch-track::after {
transform: translateX(19.6px);
}HTML:
<label class="switch-wrap"> <input type="checkbox" /> <span class="switch-track"></span> <span>Label</span> </label>
Frequently Asked Questions
- How do I use the switch?
- Wrap a checkbox in a label and add the generated class. The CSS hides the native input and styles the toggle.
- Can I use it with forms?
- Yes. The underlying input remains a checkbox, so it works with normal form submission.
Related Developer Tools
JSON Formatter
Format, validate, and beautify JSON. Minify or pretty-print with one click.
Base64 Decode
Decode Base64 strings to text. Encode text to Base64.
UUID Generator
Generate random UUIDs (v4) for unique identifiers. Copy with one click.
URL Encoder Decoder
Encode and decode URLs. Convert special characters for safe use in URLs.
Convert Color Hex to RGB
Convert hex color codes to RGB values (R, G, B).
Convert Color RGB to Hex
Convert RGB values (R, G, B) to hex color codes.