Checkbox Generator

Customize checkbox styles with CSS using this free online generator.
Adjust colors, size, borders, checked 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="checkboxItem">
  <input type="checkbox" name="checkbox" value="Option 1" class="checkbox" checked />
  Option 1
</label>
<label class="checkboxItem">
  <input type="checkbox" name="checkbox" value="Option 2" class="checkbox" />
  Option 2
</label>
<label class="checkboxItem">
  <input type="checkbox" name="checkbox" value="Option 3" class="checkbox" />
  Option 3
</label>.checkboxItem {
  display: flex;
  align-items: center;
  column-gap: 4px;
  width: fit-content;
  line-height: 1;
  cursor: pointer;
}

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

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

.checkbox:checked {
  background-color: #06b6d4;
}

.checkbox:checked::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 12px;
  height: 6px;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  transform: rotate(-45deg);
}

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

Checkbox Generator

Customization

Related Tools

Radio Button Generator

Toggle Button Generator

input type="range" Generator

Hamburger Button Generator