Playground · 23 demos
CSS Checkboxes Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Checkboxes collection for the gallery view with code panels.
01 Pure CSS
Smooth Slide Toggle
Pill toggle with gradient fill. The thumb glides on a cubic-bezier curve.
Open
02 Pure CSS
Neon Glow Checkbox
Electric box-shadow glow blooms when checked. The checkmark is an inline SVG.
Open
03 Pure CSS
Draw Stroke Checkmark
The checkmark draws itself using SVG stroke-dashoffset animation on :checked.
Open
04 Pure CSS
Bouncy Pop Checkbox
An inner dot springs in with cubic-bezier overshoot, giving an elastic tactile feel.
Open
05 Pure CSS
Glassmorphism Checkbox
Frosted glass via backdrop-filter. Checked state fills with a translucent gradient.
Open
06 Pure CSS
Neumorphic Checkbox
Dual box-shadows create extrusion. Checked state inverts to a pressed inset.
Open
07 Pure CSS
Liquid Fill Checkbox
A flood fill rises from the bottom using scaleY then reveals a white checkmark.
Open
08 Pure CSS
Rotating Ring Checkbox
A conic-gradient ring spins in on check. The inner dot scales up simultaneously.
Open
09 Pure CSS
Brutalist Checkbox
Hard offset shadow gives physical depth. Checking shifts the box like pressing a button.
Open
10 Pure CSS
Gradient Sweep Checkbox
A rainbow gradient sweeps across the box using background-position animation on check.
Open
11 Pure CSS
3D Flip Checkbox
The box rotates on the Y axis using rotateY to reveal a checked face.
Open
12 Pure CSS
Ripple Wave Checkbox
A ring expands outward from the checkbox on check using a scale + fade keyframe.
Open
13 Pure CSS
Retro Pixel Checkbox
An 8-bit checkmark built from SVG rects with crispEdges. Scales in with a pop on check.
Open
14 Pure CSS
Strikethrough Checkbox
Checking the box strikes through the label text with a sliding underline.
Open
15 Pure CSS
Gooey Blob Checkbox
A morphing blob shape squishes into view with spring easing when checked.
Open
16 Pure CSS
Dark Mode Toggle
Moon-to-sun emoji toggle that shifts between a dark and a warm golden background.
Open
17 Pure CSS
Pulse Ring Checkbox
A ring pulses outward from the box on check, like a sonar ping.
Open
18 Pure CSS
Dash to Check
An indeterminate dash morphs into a checkmark using border rotation on check.
Open
19 CSS + JS
Multi-State Checkbox
Three visual states — unchecked, partial (amber), and checked (green) — cycled by JS.
Open
20 CSS + JS
Magnetic Checkbox
The checkbox box subtly shifts toward the cursor on hover using JS-driven translate.
Open
21 CSS + JS
Confetti Burst Checkbox
Coloured dots explode outward from the checkbox the moment it is checked.
Open
22 Pure CSS
Slide-In Label
A confirmation label slides in from the left when the checkbox is checked.
Open
23 Pure CSS
Aurora Toggle
A toggle whose track fills with a shifting aurora gradient when active.
Open