Design custom CSS checkboxes with your own size, colors, radius and check style. Preview live and copy the HTML and CSS. Free checkbox generator.
About this tool
Design a styled checkbox and copy its HTML and CSS.
How to use CSS Checkbox Generator
- Choose Tick, Cross or Dot as the check mark.
- Set Size, Corner radius, Border width and the checked and border colors.
- Copy HTML and CSS and test checked, unchecked and keyboard-focus states on your page.
Worked example
Create a rounded checkbox with a colored tick for a settings form.
Does styling connect it to a form automatically?
No. Give the input the correct name, value and label in your application.
Can I remove all focus indication?
Keep a visible keyboard-focus state. A decorative preview alone does not prove the final form is accessible.
Explore CSS Tools · More practical guides