CSS Toggle Switch Generator
Make a pure-CSS on/off switch. Set the size, the on and off colours, the knob and the radius, and a real switch flips as you edit. You get the HTML and CSS, no JavaScript needed.
This CSS toggle switch builds an on/off switch that runs on CSS alone, no JavaScript. Set the track size, the on and off colours, the knob colour and the corner radius, and a working switch flips next to the code. As a switch css generator it uses a hidden checkbox and the :checked state to slide the knob, so the markup stays simple. Whether you want an iOS toggle CSS look or a square switch, this css switch maker gives you the HTML and CSS to paste in.
Set the radius near half the height for a rounded iOS look, or drop it to 0 for a square switch. The knob size follows the track height automatically.
<label class="switch"> <input type="checkbox" /> <span class="switch__track"></span> </label>
.switch {
display: inline-block;
position: relative;
width: 56px;
height: 30px;
cursor: pointer;
}
.switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.switch__track {
position: absolute;
inset: 0;
background: #cbd5e1;
border-radius: 15px;
transition: background 0.25s ease;
}
.switch__track::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
background: #ffffff;
border-radius: 50%;
transition: transform 0.25s ease;
}
.switch input:checked + .switch__track {
background: #22c55e;
}
.switch input:checked + .switch__track::before {
transform: translateX(26px);
}How it works
- 1
Size the track
Set the track width and height and the corner radius. The knob sizes itself to the track.
- 2
Choose the colours
Pick the on colour, the off colour and the knob colour. Click the preview to see both states.
- 3
Copy HTML and CSS
This css switch maker gives you a label with a checkbox plus the CSS. Copy both and drop them in.
Instant & 100% private — nothing is uploaded
Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.
Frequently asked questions
- How does a CSS toggle switch work without JavaScript?
- A hidden checkbox holds the state and the label styles react to :checked. When the box is ticked, the CSS slides the knob and swaps the track colour, so no script is involved.
- How do I get the iOS toggle CSS look?
- Set the corner radius to about half the track height for the rounded pill shape, use a green on colour and a white knob. That’s the familiar iOS toggle CSS style.
- Is the switch accessible?
- The control is a real checkbox, so it’s keyboard focusable and works with assistive tech. Wrap it in a label with text, or add an aria-label, so its purpose is clear.
- Can I make a square switch instead of rounded?
- Yes. Drop the corner radius toward 0 in this switch css generator and both the track and the knob travel stay square-edged.
- How do I read the switch state in a form?
- The checkbox submits like any other. Give it a name and value, and a ticked switch sends that value when the form posts.
More tools
More from the Hivly network
Free sister tools on our other sites.
