Checkboxes — 850 CSS effects

Custom checkboxes, radio controls, and selection states.

Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.

Page 7 of 9

Live preview Checkboxes

Planet Orbit Toggle

A planet spins with a purple glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Plover Toggle

A plover spins gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Plus Grow Vertical

A horizontal bar grows a vertical bar to morph from minus into a plus when checked.

#border #css

Live preview Checkboxes

Pluto Dwarf Planet

An icy dwarf planet with a heart shape appears when checked.

#gradient #transform #border

Live preview Checkboxes

Police Car Toggle

A police car flashes blue when checked.

#animation #transform #shadow

Live preview Checkboxes

Polo Toggle

A polo player flips brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Pomegranate Toggle

A pomegranate rotates red on check.

#transform #shadow #filter

Live preview Checkboxes

Pomelo Toggle

A pomelo pulses yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Pool Toggle

A pool ball pulses purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Popcorn Pop Toggle

A popcorn box pops with a buttery glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Post Office Toggle

A post office slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Powderpost Beetle Toggle

A powderpost fades in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Praying Mantis Toggle

A praying mantis shakes green when checked.

#animation #transform #shadow

Live preview Checkboxes

3D Press Check

A chunky 3D button-style checkbox that presses down and turns green when checked.

#3d #shadow #border

Live preview Checkboxes

Pretzel Twist Toggle

A pretzel twists with a golden glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Prune Toggle

A prune rotates purple on check.

#transform #shadow #filter

Live preview Checkboxes

Pu-erh Tea Toggle

A pu-erh slides in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Puffin Toggle

A puffin pulses orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Pulsar Radio Beams

Concentric radio waves pulse outward when this star is checked.

#animation #transform #shadow

Live preview Checkboxes

Punch Toggle

A punch fades in red when checked.

#transform #shadow #filter

Live preview Checkboxes

Pyrite Fool's Gold

A metallic gold pyrite cube shines brightly when checked.

#gradient #transform #shadow

Live preview Checkboxes

Quarter Note Toggle

A quarter note symbol fades in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Quartz Cluster Toggle

A cluster of quartz points lights up when checked.

#gradient #border

Live preview Checkboxes

Quasar Energy Beams

A bright galactic core emits twin beams when checked.

#animation #gradient #transform

Live preview Checkboxes

Rabbit Hop Toggle

A rabbit hops with a pink glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Raccoon Mask Toggle

A raccoon shakes with a gray glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Racquetball Toggle

A racquetball slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Radio Tune Toggle

A radio glows amber when checked.

#transform #shadow #filter

Live preview Checkboxes

Rail Bird Toggle

A rail flips brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Rainbow Arc Toggle

A rainbow cycles hues when checked.

#animation #transform #shadow

Live preview Checkboxes

Raisin Toggle

A raisin flips in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Rambutan Toggle

A rambutan shakes red when checked.

#animation #transform #shadow

Live preview Checkboxes

Ramen Slurp Toggle

A ramen bowl steams to life with a warm glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Raspberry Toggle

A raspberry spins pink when checked.

#animation #transform #shadow

Live preview Checkboxes

Raven Toggle

A raven fades in black when checked.

#transform #shadow #filter

Live preview Checkboxes

Redpoll Toggle

A redpoll glows red when checked.

#transform #shadow #filter

Live preview Checkboxes

Redstart Toggle

A redstart rotates red on check.

#transform #shadow #filter

Live preview Checkboxes

Relay Race Toggle

A relay baton spins yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Rhinoceros Beetle Toggle

A rhino beetle shakes gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Rhombus Shape Toggle

A rhombus glows cyan when checked.

#transform #shadow #filter

Live preview Checkboxes

Auto Rickshaw Toggle

An auto rickshaw bounces in orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Ring Bling Toggle

A ring sparkles blue when checked.

#animation #transform #shadow

Live preview Checkboxes

Ripple Burst Check

Toggling on triggers an expanding ripple ring around the checkbox.

#animation #border #transform

Live preview Checkboxes

Ristretto Toggle

A ristretto shakes brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Robin Toggle

A robin flips red when checked.

#transform #shadow #filter

Live preview Checkboxes

Rocket Launch Toggle

A rocket emoji lifts off with a tilted angle and exhaust glow when launched.

#animation #3d #shadow

Live preview Checkboxes

Rocket Ship Toggle

A rocket ship launches upward red when checked.

#transform #shadow #filter

Live preview Checkboxes

Rose Romance Toggle

A rose glows deep red when checked.

#animation #transform #shadow

Live preview Checkboxes

3D X-Axis Flip

A 3D flip on the X axis revealing a checkmark on the bottom face.

#transform #border #3d

Live preview Checkboxes

Rotate Counter-Clockwise

The box spins counter-clockwise with a checkmark when checked.

#transform #border

Live preview Checkboxes

Rotate Clockwise

The box rotates clockwise revealing a checkmark when checked.

#transform #border

Live preview Checkboxes

Rowing Toggle

A rower fades in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Ruby Red Gem

A vivid red ruby emits a fiery glow when checked.

#gradient #shadow #border

Live preview Checkboxes

Ruddy Duck Toggle

A ruddy bounces brown on check.

#animation #transform #shadow

Live preview Checkboxes

Rugby Ball Toggle

A rugby ball spins brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Ruler Measure Toggle

A ruler glows yellow when checked.

#transform #shadow #filter

Live preview Checkboxes

Rum Toggle

A rum spins brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Running Toggle

A runner pulses red when checked.

#animation #transform #shadow

Live preview Checkboxes

Sailing Toggle

A sailboat bounces blue on check.

#animation #transform #shadow

Live preview Checkboxes

Sake Pour Toggle

A sake bottle glows warm when checked.

#transform #shadow #filter

Live preview Checkboxes

Sandpiper Toggle

A sandpiper shakes gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Sapphire Blue Gem

A deep blue sapphire glows with internal light when checked.

#gradient #shadow #border

Live preview Checkboxes

Sapsucker Toggle

A sapsucker slides in red when checked.

#transform #shadow #filter

Live preview Checkboxes

Satellite Signal Toggle

A satellite glows cyan when checked.

#animation #transform #shadow

Live preview Checkboxes

Saturn Ringed Planet

A ringed Saturn tilted at an angle shows when checked.

#gradient #transform #border

Live preview Checkboxes

Sawfly Toggle

A sawfly slides in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Saxophone Toggle

A saxophone rotates in jazz gold when checked.

#transform #shadow #filter

Live preview Checkboxes

Bounce Scale Check

A springy bounce scale when the checkbox is toggled on.

#transform #border

Live preview Checkboxes

Scale Down Check

The checkmark shrinks from oversized to fit when checked.

#transform #border

Live preview Checkboxes

Scale Pop Checkmark

The checkmark scales up with overshoot then settles, paired with a soft background.

#border #transform #rotate

Live preview Checkboxes

Scale Up Check

The checkmark grows from 0 to full size when toggled on.

#transform #border

Live preview Checkboxes

School Toggle

A school building slides up blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Scooter Toggle

A pink scooter slides down when checked.

#transform #shadow #filter

Live preview Checkboxes

Scorpion Toggle

A scorpion bounces orange on check.

#animation #transform #shadow

Live preview Checkboxes

Scoter Toggle

A scoter spins black when checked.

#animation #transform #shadow

Live preview Checkboxes

Screw Bolt Toggle

A screw rotates gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Seal Clap Toggle

A seal glows gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Sencha Toggle

A sencha spins green when checked.

#animation #transform #shadow

Live preview Checkboxes

Arrow Shape Toggle

A right arrow that fills green when checked.

#shadow #filter

Live preview Checkboxes

Circle Shape Toggle

A circle outline that fills with cyan when checked.

#shadow #border

Live preview Checkboxes

Crescent Shape Toggle

A crescent moon shape that lights up amber when checked.

#shadow

Live preview Checkboxes

Cross Shape Toggle

A plus-shaped cross that fills red when checked.

#shadow #filter

Live preview Checkboxes

Cube Shape Toggle

A 3D cube outline that fills indigo when checked.

#transform #shadow #border

Live preview Checkboxes

Diamond Shape Toggle

A diamond shape that fills violet when checked.

#transform #shadow #border

Live preview Checkboxes

Heart Shape Toggle

A heart shape that fills red when checked.

#shadow #filter

Live preview Checkboxes

Hexagon Shape Toggle

A hexagon that fills pink when checked.

#shadow #filter

Live preview Checkboxes

Octagon Shape Toggle

An octagon that fills teal when checked.

#shadow #filter

Live preview Checkboxes

Pentagon Shape Toggle

A pentagon that fills blue when checked.

#shadow #filter

Live preview Checkboxes

Ring Shape Toggle

A ring (donut) shape that lights up teal when checked.

#shadow

Live preview Checkboxes

Square Shape Toggle

A square outline that fills with amber when checked.

#shadow #border

Live preview Checkboxes

Star Shape Toggle

A 5-point star that fills gold when checked.

#shadow #filter

Live preview Checkboxes

Trapezoid Shape Toggle

A trapezoid that fills rose when checked.

#shadow #filter

Live preview Checkboxes

Triangle Shape Toggle

A triangle outline that fills green when checked.

#shadow #border #filter

Live preview Checkboxes

Shark Bite Toggle

A shark shakes with a steel glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Sharp Symbol Toggle

A sharp music symbol pops in red when checked.

#transform #shadow #filter

Live preview Checkboxes

Shell Beach Toggle

A shell glows pink when checked.

#transform #shadow #filter