CSS Checkbox Generator

Generate custom styled CSS checkboxes without JavaScript.

Runs 100% in your browser — your data never leaves this device

Style

Size24px

Radius4px

Checked Color

Unchecked Color

Preview

Unchecked

HTML

<label class="checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

CSS

/* CSS Custom Checkbox */
.checkbox {
  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 4px;
  transition: 0.2s;
  position: relative;
}

.checkbox:hover .checkmark {
  background: #cbd5e1dd;
}

.checkbox input:checked ~ .checkmark {
  background: #3b82f6;
}

.checkbox input:checked ~ .checkmark:after {
  content: "";
  position: absolute;
  left: 8.399999999999999px;
  top: 3.5999999999999996px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is CSS Checkbox Generator?

CSS checkboxes replace the default browser checkbox with custom styled versions using pure CSS. Using the checkbox hack and pseudo-elements, you can create checkboxes with custom colors, shapes, and animations.