CSS Checkbox Generator

Customize

Checkbox Size:

Border Radius:

Border Width:

Border Color:

Background Color:

Checkmark Color:

CSS Output:

Select Checkbox Size: Adjust the size of the checkbox by changing the Checkbox Size value. This will affect the width and height of the checkbox.
Set Border Radius: Modify the Border Radius value to round the corners of the checkbox. A higher value creates a more rounded checkbox.
Adjust Border Width: Change the Border Width value to increase or decrease the thickness of the checkbox border.
Choose Border Color: Select a color for the checkbox border by setting the Border Color. This defines the color around the checkbox.
Set Background Color: Pick a color for the checkbox background by adjusting the Background Color. This color is visible when the checkbox is checked.
Select Checkmark Color: Adjust the Checkmark Color to define the color of the checkmark that appears when the checkbox is checked.
Randomize Styles: Click the RANDOMIZE button to generate random styles for all the properties, if you want to quickly see different style combinations.
Preview: View how the checkbox looks in the Preview area, which updates in real-time as you change the settings.
Copy CSS: Once satisfied with the style, copy the generated CSS code by clicking on the COPY CSS button. This code can then be used in your project to style checkboxes.
Use HTML Code: Copy the provided HTML structure to use in your web project. Make sure the CSS is linked properly to see the customized checkbox.