Checkbox

CSS checkbox generator

Style a custom checkbox with color, size, and radius controls, then copy HTML + CSS.

Size: 24pxRadius: 6pxChecked colorBorder color

Label

HTML + CSS

<label class="c-checkbox">
  <input type="checkbox" checked />
  <span class="c-checkbox__box"></span>
  <span>Label</span>
</label>

<style>
.c-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.c-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.c-checkbox__box {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.c-checkbox__box::after {
  content: "";
  position: absolute;
  left: 35%;
  top: 15%;
  width: 5px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}
.c-checkbox input:checked + .c-checkbox__box {
  background: #6366f1;
  border-color: #6366f1;
}
.c-checkbox input:checked + .c-checkbox__box::after {
  transform: rotate(45deg) scale(1);
}
.c-checkbox input:focus-visible + .c-checkbox__box {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
</style>

Generated locally in your browser.

CSS

CSS checkbox generator

Details

How to use CSS checkbox generator

What the tool does, how to run it, and what to expect from the result.

How to build a custom CSS checkbox

The right way to style a checkbox is not to replace it. Keep the native <input type="checkbox"> in the DOM so it keeps its keyboard behaviour, its form value, and its accessibility semantics, hide it visually, and paint a sibling element that reacts to the :checked state with a CSS sibling selector.

This generator produces exactly that pattern: a label wrapping a hidden real input, a styled box, and a checkmark drawn from a rotated border. No JavaScript and no framework.

Set the box size (14 to 48px) and the corner radius (0 to 24px).
Pick the checked colour and the unchecked border colour.
Copy the HTML and CSS snippet.
Move the contents of the style block into your stylesheet and keep the focus-visible rule.
Verify you can reach and toggle the checkbox with Tab and Space before shipping.

Tips

Getting a better result out of CSS checkbox generator

Specific settings and thresholds, not general advice.

The generated markup keeps a real <input type="checkbox"> in the DOM, hidden with opacity 0 rather than display: none. That distinction matters: display: none removes the input from the accessibility tree and from tab order, and the checkbox stops working for keyboard and screen-reader users entirely.
The styling hangs off the CSS sibling selector, input:checked + .c-checkbox__box, so the native input remains the single source of truth for state. Form submission, required validation, and the indeterminate property all keep working, because you never replaced the control, only its paint.
A focus-visible outline is included at 2px with a 2px offset. Do not delete it. Removing the focus ring is the most common accessibility regression in custom checkbox code, and focus-visible already suppresses it for mouse users, so it costs you nothing visually.
Size runs 14px to 48px, but the touch target should be at least 44 x 44px on mobile per Apple's and Google's guidance. The generated label wraps the box and the text, so the whole label is clickable, which is what usually gets you there.
The checkmark is a rotated box border, not an SVG or a font glyph, which means it scales cleanly and needs no extra asset. Its thickness is fixed at 2px, so at 48px the tick looks proportionally thinner than at 14px.

Limits

What CSS checkbox generator does not do

The honest boundary, so you do not lose time finding it yourself.

One style: a square box with a tick. No radio buttons, no indeterminate dash state, and no switch style.
Colours, size, and border radius only. No hover state, disabled state, or custom checkmark shape.
The checkmark border width is fixed at 2px regardless of the box size.
The snippet ships a <style> block, so you must move the CSS into your stylesheet yourself.

Reference

Terms used on this page

Short, plain-language definitions for the formats and settings above.

Files & formatsHTMLHTML (HyperText Markup Language) is the standard text-based language that defines the structure and content of web pages, using tags like `<p>`, `<a>`, and `<img>`. Browsers read HTML and render it into the pages you see.General

At a glance

Who CSS checkbox generator is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Front-end developers styling form controls.

Ideal for

Using the css checkbox generator without installing anything or signing up.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Is the generated checkbox accessible?

Yes, by construction. The real input stays in the DOM and is hidden with opacity 0 and zero dimensions, not display: none, so it keeps its place in the tab order and the accessibility tree. It is wrapped in a label, so the text is clickable and screen readers announce it. And there is a focus-visible outline, which you should not remove.

Why not use display: none on the input?

Because display: none takes the element out of the accessibility tree and out of the tab order. A keyboard user could never reach the checkbox and a screen reader would never announce it. Hiding with opacity: 0 plus zero width and height keeps the control fully functional while making it invisible.

Does the checkmark animate?

Yes. The tick is scaled from 0 to 1 over 150ms, and the box's background and border colours transition over the same interval. It uses transform rather than width or height, so the animation runs on the compositor and does not trigger layout.

Can I add a hover or disabled state?

The generator does not emit them, and both are one rule each. Add .c-checkbox:hover .c-checkbox__box { border-color: ... } for hover, and .c-checkbox input:disabled + .c-checkbox__box { opacity: 0.5; cursor: not-allowed } for disabled. Remember that a disabled control is exempt from WCAG contrast rules, but a low-contrast enabled one is not.

Do I need Tailwind or any framework for this?

No. The output is plain HTML and plain CSS with a couple of class names. There is no dependency, no build step, and no JavaScript. Paste the markup, move the CSS into your stylesheet, and it works.

Recommendations

Nearby tools from the catalog that fit the same job or workflow.

CTS

UtilityCSS

CSS toggle switch generator

CSS

Build an iOS-style toggle switch with on/off colors and size, then copy the HTML and CSS. Free, in your browser, nothing is uploaded.

CSS

UtilityCSS

CSS Gradient Generator

Generate CSS gradients

Create linear and radial CSS gradients with custom colors and angle. Live preview and copyable CSS, in your browser.

CAG

UtilityCSS

CSS Animation Generator

CSS

Build a CSS keyframes animation visually with presets and timing controls, then copy the code. Free, in your browser, nothing is uploaded.

CBP

UtilityCSS

CSS background pattern generator

CSS

Generate stripe, dot, grid, and checkerboard CSS patterns with color and size controls. Free, in your browser, nothing is uploaded.

CSS

UtilityCSS

CSS Border-Radius Generator

Generate CSS border-radius

Set each corner radius independently and preview the rounded shape live. Live preview and copyable CSS, in your browser.

CSS

UtilityCSS

CSS Box-Shadow Generator

Generate CSS box-shadow

Build a CSS box-shadow with offset, blur, spread, color, and inset controls. Live preview and copyable CSS, in your browser.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

iPhone
Android
Macsoon
Windowssoon

Get it on the App Store Get it on Google Play All platforms & pricing