CSS Checkbox Generator

Build a pure CSS checkbox on your device with live preview. Choose outline, filled, or round styles, set size and colors, then copy HTML and CSS.

PrivateIn your browserInstantUnlimited

Size (22px)

Border (2px)

Corner radius (4px)

Border color

Checked color

Show focus ring

Preview

Click the box to toggle. Keyboard users can tab to it when the focus ring option is on.

HTML and CSS

/* HTML */
<label class="easy24-check">
  <input type="checkbox" />
  <span class="easy24-check__box" aria-hidden="true"></span>
</label>

/* CSS */
.easy24-check {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 22px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
}

.easy24-check input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.easy24-check__box {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #94a3b8;
  border-radius: 4px;
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.easy24-check__box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 6px;
  height: 10px;
  border: solid #0f6e68;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: translate(-50%, -60%) rotate(45deg) scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.easy24-check input:checked + .easy24-check__box {
  border-color: #0f6e68;
  background: transparent;
}

.easy24-check input:checked + .easy24-check__box::after {
  opacity: 1;
  transform: translate(-50%, -60%) rotate(45deg) scale(1);
  border-color: #0f6e68;
}

.easy24-check input:disabled + .easy24-check__box {
  opacity: 0.55;
  cursor: not-allowed;
}

.easy24-check:has(input:focus-visible) .easy24-check__box {
  outline: 2px solid color-mix(in srgb, #0f6e68 70%, white);
  outline-offset: 3px;
}

HTML only

<label class="easy24-check">
  <input type="checkbox" />
  <span class="easy24-check__box" aria-hidden="true"></span>
</label>

This is decorative CSS over a native checkbox. Set name and value in your form, and keep a visible text label for accessibility. Older browsers without :has may skip the optional focus ring style.

How it works

Choose a style and colors

Start from a preset or pick outline, filled, or round. Adjust size, border, corner radius when relevant, and the colors for border, checked state, and checkmark.

Try the live checkbox

Click or tab to the preview control. The same HTML and CSS you will copy drive the preview, so the motion and colors match the snippet.

Copy or download the snippet

Copy the combined HTML and CSS, copy HTML alone, or download checkbox.css. Everything stays in this tab

What is CSS Checkbox Generator?

CSS Checkbox Generator helps you style a native checkbox without digging through random snippets. You get a small HTML and CSS pair with outline, filled, or round options, plus clear notes about focus styling and the need for visible labels in real forms.

Why use this tool

Generate a pure CSS checkbox from a native input and a box span.
Switch between outline, filled, and round looks with live preview.
Tune size, border, radius, and colors for unchecked and checked states.
Include an optional focus ring for keyboard users.
Copy HTML and CSS together or grab the HTML markup alone.
Use the tool as often as you like. There is no daily free plan cap.

Questions

What does CSS Checkbox Generator do?

It builds HTML and CSS for a styled checkbox that still uses a native input. You adjust the look in the browser, preview checked and unchecked states, and copy the snippet into your project.

Is the checkbox accessible?

The control keeps a real checkbox inside a label, which helps screen readers and keyboard use. Place visible text next to it that names the choice, and keep the focus ring enabled when you can.

Does it need JavaScript?

No. Checked styling uses CSS alone. Add JavaScript only if your app must react beyond the native form control.

How is this different from CSS Switch?

CSS Switch builds a sliding toggle. This tool builds a square or round checkbox with a checkmark. Use Switch for on off settings and Checkbox for multi select lists and agreements.

Is my CSS sent to a server?

No. Generation and preview run entirely in this browser tab.

Is there a daily limit?

No. This tool has no daily usage cap on the free plan.

If Easy24 helped, buy a coffee

Tools stay free. A one-time tip is optional and helps keep them running.

Buy a coffee

Similar Developer tools

See all

JSON Formatter

Developer

Pretty-print, minify, validate, and sort JSON keys in the browser. Choose 2- or 4-space indent, import a file, download the result.

Open

Meta Tag Generator

Developer

Build SEO title, description, Open Graph, Twitter Card, and canonical tags with a live social preview. Runs in the browser.

Open

CSS Gradient Generator

Developer

Design linear and radial CSS gradients with up to three color stops. Live preview, presets, hex input, copy or download.

Open