CSS Checkbox Generator
Create beautiful, accessible custom checkboxes with CSS. Design checkboxes with multiple states, animations, and styles. Generate production-ready CSS instantly.
Quick Presets
Customize Checkbox
Preview
Generated CSS
/* Base checkbox */
.custom-checkbox {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 4px;
background-color: #ffffff;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Checked state */
.custom-checkbox:checked {
background-color: #3b82f6;
border-color: #3b82f6;
}
/* Checkmark */
.custom-checkbox:checked::after {
content: '';
position: absolute;
width: calc(20px * 0.3);
height: calc(20px * 0.5);
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Indeterminate state */
.custom-checkbox:indeterminate {
background-color: #3b82f6;
border-color: #3b82f6;
}
.custom-checkbox:indeterminate::after {
content: '';
position: absolute;
width: calc(20px * 0.6);
height: 2px;
background-color: #ffffff;
}
/* Hover state */
.custom-checkbox:hover:not(:disabled) {
background-color: #ffffff;
border-color: #2563eb;
transform: scale(1.05);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Focus state */
.custom-checkbox:focus {
outline: 2px solid #93c5fd;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
/* Disabled state */
.custom-checkbox:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f3f4f6;
border-color: #d1d5db;
}When to Use This Tool
Create custom checkboxes for forms, surveys, settings panels, and user input interfaces.
Recommended: Forms & Inputs
Generate consistent checkbox styles that match your brand guidelines and design tokens across applications.
Recommended: Component Libraries
Build high contrast, keyboard-navigable checkboxes with clear focus states and WCAG compliance.
Recommended: Inclusive Design
Style interactive checkboxes for task management UIs, project boards, and checklist applications.
Recommended: Productivity Apps
Design toggle-style or modern checkbox controls for application settings and user preferences.
Recommended: Configuration UIs
Create checkboxes optimized for dark interfaces with proper contrast and visual hierarchy.
Recommended: Dark Themes
How It Works
Choose a preset from 10 professionally designed checkbox styles or start from scratch
Select checkbox size (small, medium, large, or custom dimensions)
Customize box appearance (border, background, radius, colors)
Style the checkmark (choose check, x, dot, or dash style with custom colors)
Configure all interactive states (hover, focus, disabled, indeterminate)
Preview all states in real-time with tab switching
Copy production-ready CSS code or download as a file
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
How do I hide the default checkbox and apply custom styles?
Use 'appearance: none' (with vendor prefixes -webkit-appearance and -moz-appearance) to remove the default browser checkbox styling. This allows you to style the checkbox element directly with CSS.
What's the best way to create a checkmark with CSS?
The most common method is using the ::after pseudo-element with borders and transform: rotate(45deg) to create a checkmark shape. Alternatively, you can use SVG backgrounds or mask-image for more complex designs.
How do I handle the indeterminate state?
The indeterminate state must be set via JavaScript (checkbox.indeterminate = true). Style it with the :indeterminate pseudo-class and typically use a dash or minus symbol instead of a checkmark.
Are custom checkboxes accessible?
Yes, when done properly. Ensure sufficient color contrast (WCAG AA minimum 4.5:1), clear focus indicators for keyboard navigation, proper cursor states, and semantic HTML with labels. Test with screen readers and keyboard navigation.
Can I use SVG for the checkmark?
Yes! You can use SVG as a background-image, mask-image, or inline within the checkbox structure. SVGs offer better scalability and allow for more complex checkmark designs with animations.
How do I style checkboxes for dark mode?
Use CSS custom properties (variables) or media queries with prefers-color-scheme: dark. Adjust border colors, backgrounds, and checkmark colors to ensure proper contrast on dark backgrounds.
What's the difference between checkbox and toggle switch?
Checkboxes represent on/off states in forms and can be part of a group (multiple selections). Toggle switches are better for immediate actions (like enabling/disabling features) and imply instant state change.
How do I ensure keyboard accessibility?
Maintain the default checkbox functionality by styling the actual <input type='checkbox'> element (not a div). Ensure visible focus states using :focus pseudo-class with outline or box-shadow. Test tab navigation and spacebar toggling.