CSS Checkbox Generator

CSS checkbox generator let's you design and generate CSS3 checkbox for your website and saves your time. You can preview the checkbox and copy or download the generated CSS code.

1Text Options

Padding Top (px)

Padding Left (px)

Margin Bottom (px)

Font Size (px)

2Border Options

Border Thickness (px)

Border Style

Border Color

Border Radius (px)

3Switch Properties

Location Top (px)

Location Left (px)

Height (px)

Width (px)

4Active Color Properties

Background Color

Hover Color

Checked Color

Checked Focus Color

Active Border Color

Hover Border Color

5Icon Properties


Icon Position Top (px)

Icon Position Left (px)

Icon Width (px)

Icon Height (px)

Radius (px)

Thickness (px)

Icon Size (px)

Icon Line Height ()

6Disabled Properties

Opacity (px)


Background Color

Border Color

Tick Color

Font Color

7Ripple Effect

Enable Animation

Show Ripple

Enable this to preview Ripple Settings

Width (em)

Height (em)

Margin Left (em)

Margin Top (em)

Radius (em)

Opacity ()


Free online tools for developers

JSON Viewer JSON Formatter, Minifier, Validator, Sort, Explorer JSON to XML, CSV, TSV, Excel
XML Viewer XML Formatter, Sort, Minifier, Validator
HTML Viewer HTML Formatter, Minifier, Validator
CSS Viewer CSS Formatter, Minifier, Validator
Javascript Viewer Javascript Formatter, Minifier, Validator, Obfuscator, Deobfuscator
CSV Viewer CSV to JSON, XML, TSV, Excel
TSV Viewer TSV to JSON, XML, CSV, Excel

Preview download

CSS Snippet copy


HTML Code copy