Assets Tools HubPremium

CSS Checkbox Stylizer

Design custom checkboxes without external image dependencies.

CSS Checkbox Stylizer

Design custom checkboxes without external image dependencies

.custom-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.custom-checkbox:checked {
  background-color: #6366f1;
  border-color: #6366f1;
}

.custom-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 35%;
  top: 15%;
  width: 25%;
  height: 50%;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

About CSS Checkbox Stylizer

Replace native checkboxes with custom designs. Lightweight CSS-only checkboxes that work across all modern browsers.

Something not working right?

Found a bug or have a suggestion to improve the CSS Checkbox Stylizer? Let us know and we'll fix it!