# transform CSS effects

Live preview Checkboxes

Puffin Toggle

A puffin pulses orange when checked.

Live preview Checkboxes

Punch Toggle

A punch fades in red when checked.

#gradient #transform #shadow

Live preview Checkboxes

Pyrite Fool's Gold

A metallic gold pyrite cube shines brightly when checked.

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.

Live preview Checkboxes

Raccoon Mask Toggle

A raccoon shakes with a gray glow when checked.

Live preview Checkboxes

Racquetball Toggle

A racquetball slides in blue when checked.

#animation #gradient #transform

Live preview Checkboxes

Radar Sweep Checkbox

A radar arm sweeps the dish once and a contact blip stays lit behind it.

Live preview Checkboxes

Radio Tune Toggle

A radio glows amber when checked.

#animation #transform #border

Live preview Checkboxes

Orbit Radio Group

Selecting a radio sends a small satellite dot into orbit around the filled centre.

Live preview Checkboxes

Rail Bird Toggle

A rail flips brown when checked.

Live preview Checkboxes

Rainbow Arc Toggle

A rainbow cycles hues when checked.

Live preview Checkboxes

Raisin Toggle

A raisin flips in brown when checked.

Live preview Checkboxes

Rambutan Toggle

A rambutan shakes red when checked.

Live preview Checkboxes

Ramen Slurp Toggle

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

Live preview Checkboxes

Raspberry Toggle

A raspberry spins pink when checked.

Live preview Checkboxes

Raven Toggle

A raven fades in black when checked.

Live preview Checkboxes

Redpoll Toggle

A redpoll glows red when checked.

Live preview Checkboxes

Redstart Toggle

A redstart rotates red on check.

Live preview Checkboxes

Relay Race Toggle

A relay baton spins yellow when checked.

Live preview Checkboxes

Rhinoceros Beetle Toggle

A rhino beetle shakes gray when checked.

Live preview Checkboxes

Rhombus Shape Toggle

A rhombus glows cyan when checked.

#transform #border #ribbon

Live preview Checkboxes

Ribbon Tie Checkbox

Two ribbon ends draw together and a knot pops into being where they cross.

Live preview Checkboxes

Auto Rickshaw Toggle

An auto rickshaw bounces in orange when checked.

Live preview Checkboxes

Ring Bling Toggle

A ring sparkles blue when checked.

Live preview Checkboxes

Ristretto Toggle

A ristretto shakes brown when checked.

Live preview Checkboxes

Robin Toggle

A robin flips red when checked.

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.

Live preview Checkboxes

Rose Romance Toggle

A rose glows deep red when checked.

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.

Live preview Checkboxes

Rotate Clockwise

The box rotates clockwise revealing a checkmark when checked.

Live preview Checkboxes

Rowing Toggle

A rower fades in blue when checked.

Live preview Checkboxes

Ruddy Duck Toggle

A ruddy bounces brown on check.

Live preview Checkboxes

Rugby Ball Toggle

A rugby ball spins brown when checked.

Live preview Checkboxes

Ruler Measure Toggle

A ruler glows yellow when checked.

Live preview Checkboxes

Rum Toggle

A rum spins brown when checked.

Live preview Checkboxes

Running Toggle

A runner pulses red when checked.

Live preview Checkboxes

Sailing Toggle

A sailboat bounces blue on check.

Live preview Checkboxes

Sake Pour Toggle

A sake bottle glows warm when checked.

#gradient #border #transform

Live preview Checkboxes

Sand Fill Checkbox

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

Live preview Checkboxes

Sandpiper Toggle

A sandpiper shakes gray when checked.

Live preview Checkboxes

Sapsucker Toggle

A sapsucker slides in red when checked.

Live preview Checkboxes

Satellite Signal Toggle

A satellite glows cyan when checked.

#gradient #transform #border

Live preview Checkboxes

Saturn Ringed Planet

A ringed Saturn tilted at an angle shows when checked.

Live preview Checkboxes

Sawfly Toggle

A sawfly slides in brown when checked.

Live preview Checkboxes

Saxophone Toggle

A saxophone rotates in jazz gold when checked.

Live preview Checkboxes

Bounce Scale Check

A springy bounce scale when the checkbox is toggled on.

Live preview Checkboxes

Scale Down Check

The checkmark shrinks from oversized to fit when checked.

Live preview Checkboxes

Scale Up Check

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

Live preview Checkboxes

School Toggle

A school building slides up blue when checked.

Live preview Checkboxes

Scooter Toggle

A pink scooter slides down when checked.

Live preview Checkboxes

Scorpion Toggle

A scorpion bounces orange on check.

Live preview Checkboxes

Scoter Toggle

A scoter spins black when checked.

Live preview Checkboxes

Screw Bolt Toggle

A screw rotates gray when checked.

Live preview Checkboxes

Seal Clap Toggle

A seal glows gray when checked.

#gradient #shadow #transform

Live preview Checkboxes

Wax Seal Checkbox

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

Live preview Checkboxes

Sencha Toggle

A sencha spins green when checked.

#transform #shadow #border

Live preview Checkboxes

Cube Shape Toggle

A 3D cube outline that fills indigo when checked.

Live preview Checkboxes

Diamond Shape Toggle

A diamond shape that fills violet when checked.

#transform #shadow #border

Live preview Checkboxes

Shark Bite Toggle

A shark shakes with a steel glow when checked.

Live preview Checkboxes

Sharp Symbol Toggle

A sharp music symbol pops in red when checked.

Live preview Checkboxes

Shell Beach Toggle

A shell glows pink when checked.

Live preview Checkboxes

Shieldbug Toggle

A shieldbug glows green when checked.

Live preview Checkboxes

Shine Sparkle Toggle

Sparkles shine with a gold glow when checked.

Live preview Checkboxes

Shot Put Toggle

A shot put shakes gray when checked.

Live preview Checkboxes

Shrike Toggle

A shrike pulses gray when checked.

Live preview Checkboxes

Shinto Shrine Toggle

A Shinto shrine glows amber when checked.

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.

Live preview Checkboxes

Ice Skating Toggle

An ice skate slides in cyan when checked.

Live preview Checkboxes

Skiing Toggle

Skis flip blue when checked.

Live preview Checkboxes

Skimmer Toggle

A skimmer fades in black when checked.

#border #transform #rotate

Live preview Checkboxes

Slide-In Checkmark

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

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.

Live preview Checkboxes

Snail Slow Toggle

A snail inches with a green glow when checked.

Live preview Checkboxes

Snake Slither Toggle

A snake slithers with a green glow when checked.

Live preview Checkboxes

Snipe Toggle

A snipe glows brown when checked.

Live preview Checkboxes

Snowboard Toggle

A snowboard bounces cyan on check.

Live preview Checkboxes

Snowflake Chill Toggle

A snowflake spins with an icy glow when checked.

Live preview Checkboxes

Soccer Ball Toggle

A soccer ball glows green when checked.

Live preview Checkboxes

Soda Pop Toggle

A soda cup rotates cyan on check.

Live preview Checkboxes

Soursop Toggle

A soursop flips green when checked.

Live preview Checkboxes

Spaceship Toggle

A flying saucer hovers in violet when checked.

Live preview Checkboxes

Sparrow Toggle

A sparrow rotates brown on check.

Live preview Checkboxes

Speaker Loud Toggle

A speaker glows cyan when checked.

Live preview Checkboxes

Spider Crawl Toggle

A spider crawls with a dark glow when checked.

#gradient #transform #border

Live preview Checkboxes

Spring Coil Checkbox

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

Live preview Checkboxes

Sprout Grow Toggle

A sprout brightens green when checked.

Live preview Checkboxes

Squash Toggle

A squash racket shakes green when checked.

Live preview Checkboxes

Stadium Toggle

A stadium bounces in green when checked.

Live preview Checkboxes

Stag Beetle Toggle

A stag beetle bounces brown on check.