Radio Button Generator

Customize radio button styles with CSS using this free online generator.
Adjust colors, size, borders, selected states, and other design settings while checking the result with a real-time preview.
HTML and CSS code is generated automatically based on your settings, so you can copy the code you need and use it directly in your website or web project.

Customization

Preview

<label class="radioItem">
  <input type="radio" name="radio" value="Option 1" class="radioButton" checked />
  Option 1
</label>
<label class="radioItem">
  <input type="radio" name="radio" value="Option 2" class="radioButton" />
  Option 2
</label>
<label class="radioItem">
  <input type="radio" name="radio" value="Option 3" class="radioButton" />
  Option 3
</label>.radioItem {
  display: flex;
  align-items: center;
  column-gap: 4px;
  width: fit-content;
  line-height: 1;
  cursor: pointer;
}

.radioItem:not(:last-of-type) {
  margin-bottom: 16px;
}

.radioButton {
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #06b6d4;
  border-radius: 9999px;
  cursor: pointer;
}

.radioButton:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  border-radius: 9999px;
  background-color: #06b6d4;
}

Notes

This tool is intended for modern browsers. Some generated CSS may not work in older browsers.
This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.

\ Share on social media /

Related Tools

View All Tools

Radio Button Generator

Customization

Related Tools

Checkbox Generator

Toggle Button Generator

input type="range" Generator

Hamburger Button Generator