Why style a real checkbox instead of building a fake one with a div?

A native gives you keyboard support (Tab and Space), form submission, and correct screen reader announcement of the checked state — all for free. The CSS here just hides the default box visually (opacity: 0, not display: none) and styles a sibling to draw the custom look, using :checked to drive its appearance.

How is the checkmark drawn without an image or icon font?

The `.box::after` pseudo-element is a small rectangle with only its bottom and right borders visible, then rotated 45 degrees — the classic CSS technique for drawing an L-shaped checkmark. It's scaled from 0 to 1 on `:checked` so it appears to draw in rather than just popping into view.

Can I use this checkbox inside a form with a label?

Yes — wrap the real ` ` and the `.box` span inside a ` `, and optionally add visible label text next to it (also inside or associated with the same label) so clicking the text toggles the box too.

Is this custom checkbox accessible?

Yes, as long as the real ` ` stays in the DOM and accessibility tree (hidden with opacity, not display: none or visibility: hidden) — screen readers will still announce it as a checkbox with its checked state, and keyboard focus will land on it as usual.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS CHECKBOX GENERATOR

Design a custom checkbox built on a real input, then copy the CSS and HTML.

Size: 22px

Corner radius: 5px

Border color

Checked fill

Checkmark color

.checkbox {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 22px;
}

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

.checkbox .box {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 2px solid #4a4238;
  border-radius: 5px;
  transition: background 0.15s ease, border-color 0.15s ease;
  pointer-events: none;
}

.checkbox input:checked + .box {
  background: #ff6a35;
  border-color: #ff6a35;
}

.checkbox .box::after {
  content: "";
  position: absolute;
  left: 33%;
  top: 50%;
  width: 28%;
  height: 50%;
  border: solid #201d19;
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}

.checkbox input:checked + .box::after {
  transform: translateY(-65%) rotate(45deg) scale(1);
}

How to build a CSS checkbox

1
Click the box in the preview to toggle checked and unchecked states.
2
Adjust the size and corner radius.
3
Pick the border color, checked-fill color, and checkmark color.
4
Copy the generated CSS and the matching HTML checkbox markup.

Questions

Why style a real checkbox instead of building a fake one with a div?: A native <input type="checkbox"> gives you keyboard support (Tab and Space), form submission, and correct screen reader announcement of the checked state — all for free. The CSS here just hides the default box visually (opacity: 0, not display: none) and styles a sibling <span> to draw the custom look, using :checked to drive its appearance.
How is the checkmark drawn without an image or icon font?: The `.box::after` pseudo-element is a small rectangle with only its bottom and right borders visible, then rotated 45 degrees — the classic CSS technique for drawing an L-shaped checkmark. It's scaled from 0 to 1 on `:checked` so it appears to draw in rather than just popping into view.
Can I use this checkbox inside a form with a label?: Yes — wrap the real `<input>` and the `.box` span inside a `<label class="checkbox">`, and optionally add visible label text next to it (also inside or associated with the same label) so clicking the text toggles the box too.
Is this custom checkbox accessible?: Yes, as long as the real `<input type="checkbox">` stays in the DOM and accessibility tree (hidden with opacity, not display: none or visibility: hidden) — screen readers will still announce it as a checkbox with its checked state, and keyboard focus will land on it as usual.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.