23 CSS Checkboxes
Advertisement
A CSS checkbox is a styled multi-select form control that lets users pick zero or more options. These 23 hand-coded designs are ready-to-ship checkbox styles for filter bars, settings panels, terms-of-service blocks, and todo lists — copy the markup, drop into your form, and ship.
01 / 23
Smooth Slide Toggle
Pure CSS 
Pill toggle with gradient fill. The thumb glides on a cubic-bezier curve.
02 / 23
Neon Glow Checkbox
Pure CSS 
Electric box-shadow glow blooms when checked. The checkmark is an inline SVG.
03 / 23
Draw Stroke Checkmark
Pure CSS 
The checkmark draws itself using SVG stroke-dashoffset animation on :checked.
04 / 23
Bouncy Pop Checkbox
Pure CSS 
An inner dot springs in with cubic-bezier overshoot, giving an elastic tactile feel.
05 / 23
Glassmorphism Checkbox
Pure CSS 
Frosted glass via backdrop-filter. Checked state fills with a translucent gradient.
06 / 23
Neumorphic Checkbox
Pure CSS 
Dual box-shadows create extrusion. Checked state inverts to a pressed inset.
07 / 23
Liquid Fill Checkbox
Pure CSS 
A flood fill rises from the bottom using scaleY then reveals a white checkmark.
08 / 23
Rotating Ring Checkbox
Pure CSS 
A conic-gradient ring spins in on check. The inner dot scales up simultaneously.
09 / 23
Brutalist Checkbox
Pure CSS 
Hard offset shadow gives physical depth. Checking shifts the box like pressing a button.
10 / 23
Gradient Sweep Checkbox
Pure CSS 
A rainbow gradient sweeps across the box using background-position animation on check.
11 / 23
3D Flip Checkbox
Pure CSS 
The box rotates on the Y axis using rotateY to reveal a checked face.
12 / 23
Ripple Wave Checkbox
Pure CSS 
A ring expands outward from the checkbox on check using a scale + fade keyframe.
13 / 23
Retro Pixel Checkbox
Pure CSS 
An 8-bit checkmark built from SVG rects with crispEdges. Scales in with a pop on check.
14 / 23
Strikethrough Checkbox
Pure CSS 
Checking the box strikes through the label text with a sliding underline.
15 / 23
Gooey Blob Checkbox
Pure CSS 
A morphing blob shape squishes into view with spring easing when checked.
16 / 23
Dark Mode Toggle
Pure CSS 
Moon-to-sun emoji toggle that shifts between a dark and a warm golden background.
17 / 23
Pulse Ring Checkbox
Pure CSS 
A ring pulses outward from the box on check, like a sonar ping.
18 / 23
Dash to Check
Pure CSS 
An indeterminate dash morphs into a checkmark using border rotation on check.
19 / 23
Multi-State Checkbox
CSS + JS 
Three visual states — unchecked, partial (amber), and checked (green) — cycled by JS.
20 / 23
Magnetic Checkbox
CSS + JS 
The checkbox box subtly shifts toward the cursor on hover using JS-driven translate.
21 / 23
Confetti Burst Checkbox
CSS + JS 
Coloured dots explode outward from the checkbox the moment it is checked.
22 / 23
Slide-In Label
Pure CSS 
A confirmation label slides in from the left when the checkbox is checked.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
How do I style a checkbox with CSS?
The native checkbox is hard to restyle directly, so the standard technique is: keep the real input type=checkbox for accessibility but visually hide it, then style a sibling element (a label or a span) as the visible box. Use the :checked pseudo-class to change that custom box when the input is ticked. Every checkbox in this gallery uses this pattern, so the control stays keyboard- and screen-reader-accessible while looking completely custom.
Can you make a custom CSS checkbox without JavaScript?
Yes — most of these are pure CSS. The :checked pseudo-class on the hidden input drives the whole visual change: the checkmark draw, glow, fill, bounce or flip all run from input:checked ~ .box rules. JavaScript is only used in a couple of celebratory demos (like the confetti burst) for effects CSS can't produce.
How do I animate the checkmark when a checkbox is ticked?
Draw the tick with SVG stroke animation or a CSS-drawn shape. The Draw Stroke demo uses an SVG path with stroke-dasharray and stroke-dashoffset, animated to 0 on :checked so the checkmark appears to draw itself. CSS-only ticks use two pseudo-element bars rotated into an L shape, revealed with a transition. Both approaches are pure CSS.
Are these CSS checkboxes accessible?
Yes. Every demo keeps the real input type=checkbox in the DOM (visually hidden, never display:none, so it stays focusable), tied to a label so clicking the label toggles it. Keyboard users can Tab to it and toggle with Space, and a visible focus state is provided. The custom visuals never replace the native input — they sit on top of it.
Can I use these checkboxes in React or other frameworks?
Yes. Each demo is plain HTML and CSS — no dependencies, no build step. Drop the markup into React (use className and htmlFor), Vue, Svelte, Astro or static HTML and it works unchanged. All 23 designs are MIT licensed and free for commercial use.
Related collections
22 CSS Button Group Designs
22
22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
button group css button group segmented control
Responsive
43 CSS Button Designs
43
43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
buttons hover animation
Responsive
20 CSS Cards with Animations
20
20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
cards components animation
Responsive