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 3 of 10

Live preview Checkboxes

Black Hole Swirl

A swirling vortex with a dark center draws matter inward when checked.

#animation #gradient #transform

Live preview Checkboxes

Blimp Toggle

A blimp floats horizontally when checked.

#animation #transform #shadow

Live preview Checkboxes

Blueberry Toggle

A blueberry slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Boar Charge Toggle

A boar shakes with a brown glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Boba Tea Toggle

A boba fades in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Lightning Bolt Zap

An SVG lightning bolt that zaps in with an electric yellow glow when toggled on.

#animation #shadow #border

Live preview Checkboxes

Bonsai Zen Toggle

A bonsai glows green when checked.

#transform #shadow #filter

Live preview Checkboxes

Book Open Toggle

A book opens with a blue glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Dashed Border March

A dashed border that marches around the box when checked.

#animation #transform #border

Live preview Checkboxes

Glowing Border

A border that lights up with a soft glow when checked.

#transform #shadow #border

Live preview Checkboxes

Gradient Border

A vibrant gradient border that appears when checked.

#animation #gradient #transform

Live preview Checkboxes

Pulsing Border

A checkbox whose border pulses continuously when checked.

#animation #transform #shadow

Live preview Checkboxes

Bouquet Gift Toggle

A bouquet glows pink when checked.

#transform #shadow #filter

Live preview Checkboxes

Bowling Ball Toggle

A bowling ball glows purple when checked.

#transform #shadow #filter

Live preview Checkboxes

Boxing Toggle

A boxing glove fades in red when checked.

#transform #shadow #filter

Live preview Checkboxes

Boysenberry Toggle

A boysenberry flips purple when checked.

#transform #shadow #filter

Live preview Checkboxes

Brandy Toggle

A brandy fades in amber when checked.

#transform #shadow #filter

Live preview Checkboxes

Bread Loaf Toggle

A bread loaf brightens golden when checked.

#transform #shadow #filter

Live preview Checkboxes

Breadfruit Toggle

A breadfruit fades in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Broccoli Tree Toggle

A broccoli brightens green when checked.

#transform #shadow #filter

Live preview Checkboxes

Brush Stroke Checkbox

A rough paint stroke sweeps across the tile with ragged edges left behind.

#clip-path #gradient #transform

Live preview Checkboxes

Bulb Idea Toggle

A bulb glows yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Bullet Train Toggle

A bullet train whooshes in silver when checked.

#transform #shadow #filter

Live preview Checkboxes

Bumblebee Toggle

A bumblebee shakes yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Bunting Toggle

A bunting flips blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Burger Bite Toggle

A burger emoji brightens and tilts when you decide to bite.

#transform #shadow #filter

Live preview Checkboxes

Circle Burst Confetti

On check, a burst of confetti particles flies outward from the checkbox center.

#animation #border #transform

Live preview Checkboxes

Bus Toggle

A yellow bus fades in when checked.

#transform #shadow #filter

Live preview Checkboxes

Butterfly Flutter Toggle

A butterfly flutters with a violet glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Cabin Hut Toggle

A rustic cabin scales in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Cable Car Toggle

A cable car slides up amber when checked.

#transform #shadow #filter

Live preview Checkboxes

Cactus Prick Toggle

A cactus glows green when checked.

#transform #shadow #filter

Live preview Checkboxes

Cake Slice Toggle

A cake slice lights up with a festive glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Calendar Date Toggle

A calendar glows red when checked.

#transform #shadow #filter

Live preview Checkboxes

Camera Snap Toggle

A camera flashes when checked.

#transform #shadow #filter

Live preview Checkboxes

Camping Tent Toggle

A camping tent glows green when checked.

#transform #shadow #filter

Live preview Checkboxes

Candle Flame Toggle

A candle flickers orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Candy Stripe Fill

A checkbox filled with animated diagonal candy stripes when checked.

#gradient #animation #border

Live preview Checkboxes

Canoe Toggle

A canoe glows blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Cappuccino Toggle

A cappuccino flips brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Sports Car Toggle

A red sports car slides in when checked.

#transform #shadow #filter

Live preview Checkboxes

Card Pay Toggle

A card glows blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Cardinal Toggle

A cardinal bounces red on check.

#animation #transform #shadow

Live preview Checkboxes

Castle Toggle

A stone castle rises up gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Caterpillar Crawl Toggle

A caterpillar wiggles with a lime glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Centipede Toggle

A centipede rotates orange on check.

#transform #shadow #filter

Live preview Checkboxes

Chai Latte Toggle

A chai glows orange when checked.

#transform #shadow #filter

Live preview Checkboxes

Champagne Pop Toggle

A champagne bottle pops with a golden glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Cherry Pair Toggle

A cherry pair bounces with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Cherry Blossom Toggle

A cherry blossom glows pink when checked.

#animation #transform #shadow

Live preview Checkboxes

Chickadee Toggle

A chickadee shakes gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Chocolate Bar Toggle

A chocolate bar glows rich brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Cicada Toggle

A cicada flips brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Cider Toggle

A cider flips red when checked.

#transform #shadow #filter

Live preview Checkboxes

Clamp Grip Checkbox

Two jaws close on the block in the middle and squeeze it slightly flat.

#gradient #transform #border

Live preview Checkboxes

Classical Building Toggle

A classical building scales in amber when checked.

#transform #shadow #filter

Live preview Checkboxes

Clementine Toggle

A clementine slides in orange when checked.

#transform #shadow #filter

Live preview Checkboxes

Rock Climbing Toggle

A climber spins brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Clock Tick Toggle

A clock glows blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Rain Cloud Toggle

A rain cloud glows blue when checked.

#animation #transform #shadow

Live preview Checkboxes

Snow Cloud Toggle

A snow cloud glows white when checked.

#transform #shadow #filter

Live preview Checkboxes

Clover Luck Toggle

A clover pops green when checked.

#transform #shadow #filter

Live preview Checkboxes

Cockroach Toggle

A cockroach bounces brown on check.

#animation #transform #shadow

Live preview Checkboxes

Cocktail Mix Toggle

A cocktail glass shimmers with a cyan glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Amber Glow Color Toggle

A color swatch that fills with amber glow when checked.

#transform #shadow #border

Live preview Checkboxes

Aqua Color Toggle

A color swatch that fills with aqua when checked.

#transform #shadow #border

Live preview Checkboxes

Blush Color Toggle

A color swatch that fills with blush when checked.

#transform #shadow #border

Live preview Checkboxes

Bronze Color Toggle

A color swatch that fills with bronze when checked.

#transform #shadow #border

Live preview Checkboxes

Cobalt Color Toggle

A color swatch that fills with cobalt blue when checked.

#transform #shadow #border

Live preview Checkboxes

Copper Color Toggle

A color swatch that fills with copper when checked.

#transform #shadow #border

Live preview Checkboxes

Coral Color Toggle

A color swatch that fills with coral when checked.

#transform #shadow #border

Live preview Checkboxes

Crimson Color Toggle

A color swatch that fills with crimson when checked.

#transform #shadow #border

Live preview Checkboxes

Cyan Color Toggle

A color swatch that fills with cyan when checked.

#transform #shadow #border

Live preview Checkboxes

Emerald Color Toggle

A color swatch that fills with emerald when checked.

#transform #shadow #border

Live preview Checkboxes

Fuchsia Color Toggle

A color swatch that fills with fuchsia when checked.

#transform #shadow #border

Live preview Checkboxes

Honeycomb Color Toggle

A color swatch that fills with honeycomb gold when checked.

#transform #shadow #border

Live preview Checkboxes

Indigo Color Toggle

A color swatch that fills with indigo when checked.

#transform #shadow #border

Live preview Checkboxes

Jade Color Toggle

A color swatch that fills with jade green when checked.

#transform #shadow #border

Live preview Checkboxes

Lavender Color Toggle

A color swatch that fills with lavender when checked.

#transform #shadow #border

Live preview Checkboxes

Magenta Color Toggle

A color swatch that fills with magenta when checked.

#transform #shadow #border

Live preview Checkboxes

Mint Color Toggle

A color swatch that fills with mint when checked.

#transform #shadow #border

Live preview Checkboxes

Mustard Color Toggle

A color swatch that fills with mustard yellow when checked.

#transform #shadow #border

Live preview Checkboxes

Orchid Color Toggle

A color swatch that fills with orchid when checked.

#transform #shadow #border

Live preview Checkboxes

Rose Pink Color Toggle

A color swatch that fills with rose pink when checked.

#transform #shadow #border

Live preview Checkboxes

Royal Blue Color Toggle

A color swatch that fills with royal blue when checked.

#transform #shadow #border

Live preview Checkboxes

Rust Color Toggle

A color swatch that fills with rust red when checked.

#transform #shadow #border

Live preview Checkboxes

Saffron Color Toggle

A color swatch that fills with saffron orange when checked.

#transform #shadow #border

Live preview Checkboxes

Salmon Color Toggle

A color swatch that fills with salmon when checked.

#transform #shadow #border

Live preview Checkboxes

Sienna Color Toggle

A color swatch that fills with sienna brown when checked.

#transform #shadow #border

Live preview Checkboxes

Teal Color Toggle

A color swatch that fills with teal when checked.

#transform #shadow #border

Live preview Checkboxes

Umber Color Toggle

A color swatch that fills with umber brown when checked.

#transform #shadow #border

Live preview Checkboxes

Violet Color Toggle

A color swatch that fills with violet when checked.

#transform #shadow #border

Live preview Checkboxes

Comet Streak Toggle

A comet streaks with a cyan glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Compass North Toggle

A compass spins red when checked.

#transform #shadow #filter

Live preview Checkboxes

Condor Toggle

A condor slides in black when checked.

#transform #shadow #filter

Live preview Checkboxes

Construction Toggle

A construction site shakes yellow when checked.

#animation #transform #shadow

Checkboxes effects