CSS Switch Generator

Build a pure CSS toggle switch on your device with live preview. Set size, on and off colors, knob color, and animation speed, then copy HTML and CSS.

PrivateIn your browserInstantUnlimited

Width (52px)

Height (30px)

Transition (0.20s)

On color

Off color

Knob color

Show focus ring

Preview

Click the switch to try the animation. Keyboard users can tab to it when the focus ring option is on.

HTML and CSS

/* HTML */
<label class="easy24-switch">
  <input type="checkbox" />
  <span class="easy24-switch__track" aria-hidden="true"></span>
</label>

/* CSS */
.easy24-switch {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 30px;
  cursor: pointer;
  user-select: none;
}

.easy24-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.easy24-switch__track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #cbd5e1;
  transition: background 0.2s ease;
}

.easy24-switch__track::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
  transition: transform 0.2s ease;
}

.easy24-switch input:checked + .easy24-switch__track {
  background: #0f6e68;
}

.easy24-switch input:checked + .easy24-switch__track::before {
  transform: translateX(22px);
}

.easy24-switch input:disabled + .easy24-switch__track {
  opacity: 0.55;
  cursor: not-allowed;
}

.easy24-switch:has(input:focus-visible) .easy24-switch__track {
  outline: 2px solid color-mix(in srgb, #0f6e68 70%, white);
  outline-offset: 3px;
}

HTML only

<label class="easy24-switch">
  <input type="checkbox" />
  <span class="easy24-switch__track" aria-hidden="true"></span>
</label>

This is decorative CSS for a checkbox based toggle. Wire the input name and value in your form, and keep a visible text label for accessibility. Older browsers without :has may skip the optional focus ring style.

How it works

Choose a preset or set colors

Start from a quick preset or set width, height, on color, off color, knob color, and transition time. Turn the focus ring on if you want a clearer keyboard outline.

Try the live switch

Use the preview to click or tab through the control. The same HTML and CSS you will copy drive the preview, so what you see matches the snippet.

Copy or download the snippet

Copy the combined HTML and CSS, copy HTML alone, or download switch.css. Everything stays in this tab

What is CSS Switch Generator?

CSS Switch Generator helps you design a compact toggle without hunting through snippets. You get a small, self contained HTML and CSS pair that follows common checkbox toggle patterns, with honest notes about focus styling and the need for a visible text label in real forms.

Why use this tool

Generate a pure CSS toggle from a checkbox and a track span.
Tune width, height, colors, and transition speed with a live preview.
Include an optional focus ring for keyboard users.
Copy HTML and CSS together or grab the HTML markup alone.
Start faster with five size and color presets.
Use the tool as often as you like. There is no daily free plan cap.

Questions

What does CSS Switch Generator do?

It builds HTML and CSS for a toggle switch that works with a native checkbox. You adjust appearance in the browser, preview the motion, and copy the snippet into your project.

Is the switch accessible?

The control uses a real checkbox inside a label, which helps screen readers and keyboard use. Add visible text next to the switch that describes what it turns on, and keep the focus ring enabled when you can.

Does it need JavaScript?

No. Checked state styling uses CSS alone. You only need JavaScript if your app must react to changes beyond the native form control.

Will it look identical in every browser?

Core on and off styles work widely. The optional focus ring uses :has, which some older browsers ignore. Test the control in your target browsers before shipping.

Is my CSS sent to a server?

No. Generation and preview run entirely in this browser tab.

Is there a daily limit?

No. This tool has no daily usage cap on the free plan.

If Easy24 helped, buy a coffee

Tools stay free. A one-time tip is optional and helps keep them running.

Buy a coffee

Similar Developer tools

See all

JSON Formatter

Developer

Pretty-print, minify, validate, and sort JSON keys in the browser. Choose 2- or 4-space indent, import a file, download the result.

Open

Meta Tag Generator

Developer

Build SEO title, description, Open Graph, Twitter Card, and canonical tags with a live social preview. Runs in the browser.

Open

CSS Gradient Generator

Developer

Design linear and radial CSS gradients with up to three color stops. Live preview, presets, hex input, copy or download.

Open