Skip to main content
iotools.cloudiotools.cloud

CSS Checkbox Generator

Generate a custom-styled CSS checkbox or toggle switch — pick a style, colors, size, corner radius and animation speed, and copy the ready-made CSS + HTML. Pure CSS, keyboard-accessible, no JavaScript.

Input

Height of the box. The Toggle Switch style is 1.8× as wide as it is tall.

Used for the checked state and the keyboard focus ring.

Border color when unchecked — the track color for the Toggle Switch style.

The tick, cross or toggle knob. Ignored by Outline, which draws its tick in the accent color.

Applies to the square styles. Filled Circle and Toggle Switch are always fully rounded.

Length of the check/uncheck transition (0.05-1s).

Shown next to the checkbox in the HTML snippet. Leave blank for a bare control.

Namespaces every generated class so the CSS can't collide with your stylesheet.

Output

Your checkbox will appear here.

The real generated checkbox, isolated in a Shadow DOM — click it to see the animation.

CSS
HTML
Was this helpful?

Guides

What it does

The CSS Checkbox Generator builds a custom-styled checkbox — or a toggle switch — as a self-contained CSS + HTML snippet. Pick a style, set the colors, the size, the corner radius and the animation speed, and copy the two code blocks straight into your project. Everything is pure CSS: no JavaScript, no icon font, no SVG sprite, no dependency of any kind.

It styles the real checkbox, not a fake one

Most custom-checkbox snippets hide the native <input> off-screen and draw a <span> next to it. That works visually but throws away everything the browser gives you for free. This generator instead sets appearance: none on the real <input type="checkbox"> and paints the box, the tick and the toggle knob with ::before / ::after pseudo-elements.

The practical difference: the control still receives focus with the Tab key, still toggles with Space, still submits its value with the surrounding form, and is still announced as a checkbox by screen readers — without a single line of extra markup or ARIA.

Every generated stylesheet also ships three things that copy-paste checkboxes usually omit:

  • a :focus-visible ring in your accent color, so keyboard users can see where they are;
  • a :disabled state (dimmed, not-allowed cursor);
  • a @media (prefers-reduced-motion: reduce) block that switches the transition and the bounce animation off for anyone who has asked their system to reduce motion.

The six styles

  • Filled Square — the classic: a bordered box that fills with the accent color and reveals a check mark drawn from a rotated border.
  • Outline — the box stays transparent; only the border and the tick take the accent color. Good on dark or busy backgrounds.
  • Filled Circle — the same fill-and-tick behavior in a fully round box.
  • Toggle Switch — a pill-shaped track with a knob that slides across on check. The markup is still a checkbox, so it works in forms unchanged.
  • Jelly Bounce — a filled square with a squash-and-stretch @keyframes bounce when it is checked.
  • Cross Mark — fills with the accent color and marks with an ✗ instead of a ✓, for "excluded" or "removed" semantics.

How to use it

  1. Choose a Checkbox Style.
  2. Set the Size — the height of the box in pixels. The Toggle Switch is automatically 1.8× as wide as it is tall.
  3. Pick the three colors: Accent (checked state and focus ring), Unchecked (the resting border, or the toggle track) and Check Mark (the tick, cross or knob).
  4. Adjust Corner Radius for the square styles and Animation Duration for the check/uncheck transition.
  5. Set a Label Text and, if your project already uses generic class names, a Class Prefix — every generated class is namespaced with it, so the rules can't collide with your existing stylesheet.
  6. Copy the CSS into your stylesheet and the HTML into your markup.

FAQ

Will this still work inside a <form>? Yes. The element being styled is the checkbox, so it posts its name and value exactly like an unstyled one. Add name="..." to the <input> in the generated markup.

How do I use several of these on one page? Paste the CSS once and reuse the <label> markup as many times as you like — the rules are class-based, not ID-based. For two different looks on one page, generate a second style with a different Class Prefix.

Why is the Check Mark Color ignored by the Outline style? Outline deliberately keeps the box transparent, so a white tick would be invisible on a light page. That style always draws its tick in the accent color instead.

Does the Corner Radius do anything for the circle or the switch? No — both are always fully rounded by design. The radius applies to Filled Square, Outline, Jelly Bounce and Cross Mark.

Does this tool upload anything? No. The snippet is generated in your browser from the values you pick; nothing is sent to a server or stored.

Related tools

Need other form or component CSS? The CSS Loading Animation Generator builds a matching pure-CSS spinner, the CSS Box Shadow Generator helps you style the card the form sits in, and the CSS Keyframe Animation Generator is the place to go if you want to write a bespoke check animation of your own. To shrink the finished stylesheet before shipping it, run it through the CSS Minifier & Beautifier.

csscheckboxtoggle switchgeneratorformuiweb design

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads