MakerBox

CSS Checkbox Generator

Design a custom checkbox in pure CSS — ten mark styles (tick, cross, square, dot, ring, dash), your colors, size and radius — copy the HTML and CSS. No upload.

Style
Checked color
Mark color
Border color

Live preview — click a box to toggle it

CSS
.cb {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.cb input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12.5 10 17.5 19 6.5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0 0;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, background-size 150ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.cb input[type="checkbox"]:checked {
  background-color: #6c5ce7;
  border-color: #6c5ce7;
  background-size: 70% 70%;
}
.cb input[type="checkbox"]:focus-visible {
  outline: 2px solid #6c5ce7;
  outline-offset: 2px;
}
HTML
<label class="cb">
  <input type="checkbox" checked />
  <span>Accept terms</span>
</label>

🔒 Generated in your browser — nothing is uploaded.

Design a custom checkbox in pure CSS

Pick one of ten mark styles — checkmark, filled square, cross, thin line, thick, solid, circle, dot, ring or dash — set the checked color, the mark color, the border color, the box size and the corner radius, and watch the live preview update as you go. When it looks right, copy the CSS and the matching HTML. The checkbox is drawn by styling a real <input type="checkbox"> with appearance: none, so it stays fully keyboard- and screen-reader-accessible — no JavaScript and no extra markup.

How the checked mark is drawn

The mark the style draws — a tick, cross, filled square, dot, ring or dash — is an inline SVG set as the input's background-image and revealed with the :checked pseudo-class. Because it is a single background layer there are no wrapper spans or pseudo-element hacks to copy — just one <input> and one rule block. A rounded :focus-visible outline is included so the control is clearly visible when tabbed to.

Frequently asked questions

Is the generated checkbox accessible?

Yes. It styles a real <input type="checkbox"> with appearance: none instead of replacing it with a <div>, so it keeps native keyboard support, the space-bar toggle, focus order and screen-reader semantics. A :focus-visible outline is included so it is clearly visible when tabbed to.

Do I need JavaScript for this checkbox?

No. The checked mark is an inline-SVG background image revealed by the :checked pseudo-class, so the whole control is pure HTML and CSS with no scripts or libraries.

How do I color the mark separately from the box?

Use the Mark color picker. The checked box uses the Checked color for its fill and border, while the Mark color is applied to whatever the chosen style draws inside it — tick, cross, filled square, dot, ring or dash.