Checkboxes — 900 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 8 of 10

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

Sand Fill Checkbox

Grains pour into the vessel in steps until the level reaches the brim.

#gradient #border #transform

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 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

Wax Seal Checkbox

A wax seal drops onto the paper, spreads outward and keeps its pressed rim.

#gradient #shadow #transform

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 #glow

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 #glow

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

Live preview Checkboxes

Shieldbug Toggle

A shieldbug glows green when checked.

#transform #shadow #filter

Live preview Checkboxes

Shine Sparkle Toggle

Sparkles shine with a gold glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Shooting Star Trail

A star shoots across the box leaving a glowing trail when checked.

#animation #gradient #border

Live preview Checkboxes

Shot Put Toggle

A shot put shakes gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Shrike Toggle

A shrike pulses gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Shinto Shrine Toggle

A Shinto shrine glows amber when checked.

#transform #shadow #filter

Live preview Checkboxes

Venetian Blind Checkbox

Four horizontal slats rotate shut one after another to darken the panel.

#transform #3d #border

Live preview Checkboxes

Siskin Toggle

A siskin flips yellow when checked.

#transform #shadow #filter

Live preview Checkboxes

Ice Skating Toggle

An ice skate slides in cyan when checked.

#transform #shadow #filter

Live preview Checkboxes

Skiing Toggle

Skis flip blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Skimmer Toggle

A skimmer fades in black when checked.

#transform #shadow #filter

Live preview Checkboxes

Slide-In Checkmark

The checkmark slides in from the left and settles into place when checked.

#border #transform #rotate

Live preview Checkboxes

Slide Fill Checkbox

Colour wipes in from the left edge of the box and the tick fades in behind it.

#gradient #transform #border

Live preview Checkboxes

Smoothie Toggle

A smoothie bounces pink on check.

#animation #transform #shadow

Live preview Checkboxes

Snail Slow Toggle

A snail inches with a green glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Snake Slither Toggle

A snake slithers with a green glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Snipe Toggle

A snipe glows brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Snowboard Toggle

A snowboard bounces cyan on check.

#animation #transform #shadow

Live preview Checkboxes

Snowflake Chill Toggle

A snowflake spins with an icy glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Soccer Ball Toggle

A soccer ball glows green when checked.

#transform #shadow #filter

Live preview Checkboxes

Soda Pop Toggle

A soda cup rotates cyan on check.

#transform #shadow #filter

Live preview Checkboxes

Soursop Toggle

A soursop flips green when checked.

#transform #shadow #filter

Live preview Checkboxes

Spaceship Toggle

A flying saucer hovers in violet when checked.

#animation #transform #shadow

Live preview Checkboxes

Sparrow Toggle

A sparrow rotates brown on check.

#transform #shadow #filter

Live preview Checkboxes

Speaker Loud Toggle

A speaker glows cyan when checked.

#animation #transform #shadow

Live preview Checkboxes

Spider Crawl Toggle

A spider crawls with a dark glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Spring Coil Checkbox

A coiled spring compresses under load and the plate settles down onto it.

#gradient #transform #border

Live preview Checkboxes

Sprout Grow Toggle

A sprout brightens green when checked.

#transform #shadow #filter

Live preview Checkboxes

Squash Toggle

A squash racket shakes green when checked.

#animation #transform #shadow

Live preview Checkboxes

Stadium Toggle

A stadium bounces in green when checked.

#animation #transform #shadow

Live preview Checkboxes

Stag Beetle Toggle

A stag beetle bounces brown on check.

#animation #transform #shadow

Live preview Checkboxes

Star Rating Toggle

A star icon that fills with gold and spins slightly when toggled on.

#shadow #transform #filter

Live preview Checkboxes

Stardust Trail Toggle

A trail of golden stardust sparkles around the box when checked.

#animation #gradient #transform

Live preview Checkboxes

Starfruit Toggle

A starfruit pulses yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Starling Toggle

A starling flips purple when checked.

#transform #shadow #filter

Live preview Checkboxes

Shooting Star Toggle

A shooting star streaks when checked.

#transform #shadow #filter

Live preview Checkboxes

Starting Style Checkbox

The control animates in from below on first paint using the starting-style rule.

#transform #border #starting-style

Live preview Checkboxes

Stickbug Toggle

A stickbug flips brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Stinkbug Toggle

A stinkbug fades in green when checked.

#transform #shadow #filter

Live preview Checkboxes

Stopwatch Time Toggle

A stopwatch glows red when checked.

#animation #transform #shadow

Live preview Checkboxes

Store Toggle

A convenience store fades in pink when checked.

#transform #shadow #filter

Live preview Checkboxes

Stork Toggle

A stork fades in white when checked.

#transform #shadow #filter

Live preview Checkboxes

Strawberry Sweet Toggle

A strawberry glows red and sweet when checked.

#animation #transform #shadow

Live preview Checkboxes

Stroke Draw Checkmark

A minimal square that draws an SVG checkmark with a dash-offset stroke animation when checked.

#border #css

Live preview Checkboxes

Studio Mic Toggle

A studio microphone scales up gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Submarine Toggle

A submarine surfaces in indigo when checked.

#transform #shadow #filter

Live preview Checkboxes

Sudachi Toggle

A sudachi fades in green when checked.

#transform #shadow #filter

Live preview Checkboxes

Sunflower Sunny Toggle

A sunflower glows golden when checked.

#transform #shadow #filter

Live preview Checkboxes

Sunrise Dawn Toggle

A sunrise glows orange when checked.

#transform #shadow #filter