CSS Radio Button Generator

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

1Text Options

Padding Top ({{vm.paddingTop}}px)

Padding Left ({{vm.paddingLeft}}px)

Margin Bottom ({{vm.marginBottom}}px)

Font Size ({{vm.fontSize}}px)

2Border Options

Border Thickness ({{vm.borderThickness}}px)

Border Style

Border Color

Border Radius ({{vm.borderRadius}}px)

3Switch Properties

Location Top ({{vm.switchLocTop}}px)

Location Left ({{vm.switchLocLeft}}px)

Height ({{vm.switchHeight}}px)

Width ({{vm.switchWidth}}px)

4Active Color Properties

Background Color

Hover Color

Checked Color

Checked Focus Color

Active Border Color

Hover Border Color

5Icon Properties

Color

Icon Position Top ({{vm.iconTop}}px)

Icon Position Left ({{vm.iconLeft}}px)

Icon Width ({{vm.iconHeight}}px)

Icon Height ({{vm.iconWidth}}px)

Radius ({{vm.radioRadius}}px)

Thickness ({{vm.iconThickness}}px)

Icon Size ({{vm.iconSize}}px)

Icon Line Height ({{vm.iconLineHeight}})

6Disabled Properties

Opacity ({{vm.disabledOpacity}}px)

Color

Background Color

Border Color

Tick Color

Font Color

Preview


CSS Snippet


        

HTML Code