CSS Checkbox Generator

Design and generate custom CSS checkboxes and toggle switches with live preview.

Label Text:

Checkbox Style Preset:

Size (px): 24

Border Radius (px): 4

Border Width (px): 2

Border Color (Hex):

Checked Background Color (Hex):

Tick Color (Hex):

Animation Duration (s): 0.3

Width (px): 44

Height (px): 24

Handle Size (px): 20

Off State Color (Hex):

On State Color (Hex):

Handle Color (Hex):

Font Awesome Icon Class: Find icons at Font Awesome

Icon Size (px): 16

Icon Color (Hex):

Checked Icon Color (Hex):

HTML:

CSS: