Why build this on a real instead of a styled div?

A native radio input gives you built-in group behavior — selecting one automatically deselects the others sharing the same `name` attribute — plus keyboard navigation with arrow keys and correct screen reader announcement. Recreating that with divs and JavaScript would be significant extra work for no visual benefit.

How does the inner dot animate in when selected?

The `.circle::after` pseudo-element is a small filled circle scaled to 0 by default. The `input:checked + .circle::after` rule scales it to 1, and since `transform` is what's transitioning (not width/height), the animation is smooth and doesn't trigger layout recalculation.

How do I group multiple radio buttons so only one can be selected?

Give every ` ` in the group the same `name` attribute (e.g. `name="plan"`) — the browser handles mutual exclusivity automatically once inputs share a name, no JavaScript required.

Is this custom radio button accessible?

Yes, as long as the real ` ` stays in the DOM and accessibility tree (hidden with opacity, not display: none) — screen readers will announce it as a radio button, its group, and its checked state, and Tab/arrow-key navigation will work as expected.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS RADIO BUTTON GENERATOR

Design a custom radio button built on a real input, then copy the CSS and HTML.

Size: 22px

Dot size: 50%

Border color

Selected color

.radio {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 22px;
}

.radio input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.radio .circle {
  position: absolute;
  inset: 0;
  border: 2px solid #4a4238;
  border-radius: 50%;
  transition: border-color 0.15s ease;
  pointer-events: none;
}

.radio input:checked + .circle {
  border-color: #ff6a35;
}

.radio .circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  background: #ff6a35;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
}

.radio input:checked + .circle::after {
  transform: translate(-50%, -50%) scale(1);
}

How to build a CSS radio button

1
Click the circle in the preview to toggle selected and unselected states.
2
Adjust the outer size and the inner dot's proportional size.
3
Pick the border color and the selected-state color.
4
Copy the generated CSS and the matching HTML radio markup.

Questions

Why build this on a real <input type="radio"> instead of a styled div?: A native radio input gives you built-in group behavior — selecting one automatically deselects the others sharing the same `name` attribute — plus keyboard navigation with arrow keys and correct screen reader announcement. Recreating that with divs and JavaScript would be significant extra work for no visual benefit.
How does the inner dot animate in when selected?: The `.circle::after` pseudo-element is a small filled circle scaled to 0 by default. The `input:checked + .circle::after` rule scales it to 1, and since `transform` is what's transitioning (not width/height), the animation is smooth and doesn't trigger layout recalculation.
How do I group multiple radio buttons so only one can be selected?: Give every `<input type="radio">` in the group the same `name` attribute (e.g. `name="plan"`) — the browser handles mutual exclusivity automatically once inputs share a name, no JavaScript required.
Is this custom radio button accessible?: Yes, as long as the real `<input type="radio">` stays in the DOM and accessibility tree (hidden with opacity, not display: none) — screen readers will announce it as a radio button, its group, and its checked state, and Tab/arrow-key navigation will work as expected.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.