CSS Checkbox & Radio Generator
Style custom checkboxes and radio buttons with pure CSS — colors, size, and check/dot marks — with a live preview and accessible, copy-ready HTML + CSS. Free.
💡 How to use
- The custom control is a real hidden
<input>plus a styled box — accessible and keyboard-friendly. - Checkboxes use rounded squares; radios use circles.
- Copy the HTML and CSS and wrap each input in the styled label.
Free CSS Checkbox & Radio Button Generator
Design custom checkboxes and radio buttons with CSS and copy the code in one click. Set the checked color, border, size, and radius with a live preview — built on real, accessible inputs, no JavaScript. Free, no sign-up, runs in your browser.
Why style checkboxes and radios?
Native checkboxes and radio buttons look different in every browser and rarely match your design. Styling them with CSS lets you control the color, size, shape, and checkmark so they fit your brand — while keeping the real input underneath for full functionality and accessibility. This generator produces exactly that: a hidden native input plus a styled box you can customise.
How to use the generator
It is instant:
- Choose checkbox (rounded square) or radio (circle).
- Set the checked color, border color, size, and corner radius.
- Click the preview to toggle the controls.
- Copy the HTML and CSS and wrap each input in the styled label.
How the custom control works
The pattern hides the native input with opacity and zero size, then styles a sibling span as the visible box. The checkmark or dot is drawn with a pseudo-element that scales in when the input is checked, using the :checked selector. Because the real input is still there — just visually hidden — the control stays fully functional: it toggles, submits in forms, and works with the keyboard, all with no JavaScript.
Keeping custom inputs accessible
The key to accessible custom controls is never removing the native input. Since it remains in the markup, screen readers announce it correctly and it is focusable and operable with the keyboard. Wrap the input and its label text in a single label element so clicking the text also toggles the control, and add a visible focus style (for example an outline on the box when the input is focused) so keyboard users can see where they are.
Checkbox vs radio
Use checkboxes when options are independent and more than one can be selected, and radios when options are mutually exclusive and only one may be chosen. Visually, the convention is a square (often rounded) for checkboxes and a circle for radios, which this generator follows. For radios to work as a group, give them all the same name attribute, which the generated markup includes.
Pro tip
Store the checked color as a CSS variable so all your form controls share one accent, and add a focus-visible outline on the styled box for keyboard accessibility. Keep the box large enough to tap comfortably on mobile. To style the surrounding form, our CSS Text Input and Button generators pair well with this tool.
FAQ
Is this Checkbox & Radio Generator free?
Does styling checkboxes need JavaScript?
Are the custom controls accessible?
How do I make radio buttons work as a group?
How do I make clicking the label toggle the control?
What is the difference between a checkbox and a radio?
Does it work in all browsers?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Flexbox Generator for a faster SEO workflow.