DevKit Tools

Radio Button Generator

Style radio buttons with size, border, dot size and colours. Animated selection, clickable preview, copy the CSS.

UI Elements/Radio
.radio { position: relative; width: 24px; height: 24px; cursor: pointer; }
.radio input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.radio .circle {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid #3a4050; transition: all .2s ease;
  display: flex; align-items: center; justify-content: center;
}
.radio input:checked + .circle { border-color: #6d5efc; }
.radio .circle::after {
  content: ""; width: 45%; height: 45%; border-radius: 50%;
  background: #6d5efc; transform: scale(0); transition: transform .2s ease;
}
.radio input:checked + .circle::after { transform: scale(1); }

About the radio button generator

Radio buttons follow the same pattern as checkboxes: hide the input, draw a circle, and scale an inner dot in on :checked. Scaling the dot rather than toggling its visibility gives the small animation that makes the control feel responsive.

Radios must share a name attribute, which is what makes them mutually exclusive.

How to use it

  1. 1Set the outer size and border width.
  2. 2Adjust the dot size as a percentage of the circle. Around 45 percent looks balanced.
  3. 3Pick selected and border colours.
  4. 4Copy the CSS and HTML.

Questions

Why can I select more than one radio?

They do not share a name attribute. Radios are grouped by name, and only one in a group can be selected.

Radio buttons or a select dropdown?

Radios when there are five options or fewer, since all choices are visible at once. A select when the list is long.

Can a radio be unselected?

Not by clicking it again. If the user needs to clear the choice, include an explicit None option.

More CSS tools

Glassmorphism GeneratorNeumorphism GeneratorBox Shadow GeneratorText Shadow GeneratorHover Effect GeneratorCSS Filter GeneratorCSS Gradient GeneratorMesh Gradient GeneratorCSS Pattern GeneratorGradient Text GeneratorBorder Radius GeneratorClip Path GeneratorCSS Transform GeneratorGradient Border GeneratorDivider GeneratorCSS Button GeneratorNav Bar GeneratorCard GeneratorTabs GeneratorTable GeneratorAlert GeneratorBreadcrumb GeneratorToggle Switch GeneratorCheckbox GeneratorTooltip GeneratorInput Field GeneratorBadge GeneratorChip GeneratorAvatar GeneratorProgress Bar GeneratorSkeleton Loader GeneratorScrollbar GeneratorLoader GeneratorCSS Animation Generator