buncha/code & dev/css-toggle

CSS Checkbox & Switch Generator

Pure-CSS checkboxes and switches that override the default browser styling — no JavaScript, no images, no library. Pick a kind, pick a style, tune size and colours, copy the CSS.

Kind

Style

Size — 24px

On colour

Off colour

Off

CSS

.sw-pill {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background: #ccc8c0;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background 200ms ease;
}
.sw-pill::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 200ms ease;
}
.sw-pill:checked {
  background: #dd7c35;
}
.sw-pill:checked::before {
  transform: translateX(20px);
}

Pure CSS — drops straight into your stylesheet.

Pairs well with

Base64 Encoder / Decoder

UTF-8-safe Base64 encode and decode. Handles emoji…

Binary Converter

Convert text to binary and binary to text.

CSS Background Pattern Generator

Build tileable backgrounds with pure CSS gradients…

CSS Clip Path Generator

Visual editor for CSS clip-path polygon shapes. Dr…

About CSS Checkbox & Switch Generator

Pure-CSS checkbox and toggle-switch styles that override the default browser look. Four checkbox styles, four switch styles, with size + on/off colour controls and live preview.

Everything happens on your device. Close the tab and it's gone.