G4GAME/DevTools

CSS Checkbox Generator

Replace the default checkbox look while keeping native behaviour. Adjust size, border, radius and checked colors and test it in the preview.

Last updated: · Runs 100% in your browser

// controls
22px
5px
2px
Live preview
Generated CSS
.checkbox {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #5a615d;
  border-radius: 5px;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.checkbox::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid #000000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  margin-top: -2px;
  transition: transform 0.15s ease;
}

.checkbox:checked {
  background: #00ff66;
  border-color: #00ff66;
}

.checkbox:checked::after {
  transform: rotate(45deg) scale(1);
}

.checkbox:focus-visible {
  outline: 2px solid #00ff66;
  outline-offset: 2px;
}

// Example output

.checkbox {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #5a615d;
  border-radius: 5px;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.checkbox::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid #000000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  margin-top: -2px;
  transition: transform 0.15s ease;
}

.checkbox:checked {
  background: #00ff66;
  border-color: #00ff66;
}

.checkbox:checked::after {
  transform: rotate(45deg) scale(1);
}

.checkbox:focus-visible {
  outline: 2px solid #00ff66;
  outline-offset: 2px;
}

// Features

  • ▸appearance: none technique
  • ▸Size, radius and border
  • ▸Checked and checkmark colors
  • ▸Focus-visible style
  • ▸Interactive preview

// How to use

  1. 01Adjust the controls on the left or pick a preset to start the CSS Checkbox Generator.
  2. 02Watch the live preview update instantly as you change each setting.
  3. 03Fine-tune the generated CSS by hand in the code panel if you like.
  4. 04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Radio Button Generator
Create custom-styled radio buttons in pure CSS with adjustable size, colors and dot size.
CSS Toggle Switch Generator
Design accessible CSS toggle switches built on a real checkbox, with custom size, colors and speed.
CSS Input Generator
Design text inputs with custom borders, padding, radius, placeholder and focus ring — copy clean CSS.