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

Live preview Checkboxes

Container Query Checkbox

Below a certain width the helper text hides and the control keeps only its label.

#border #transform #container-query

Live preview Checkboxes

Control Knobs Toggle

Audio control knobs rotate indigo when checked.

#transform #shadow #filter

Live preview Checkboxes

Cool Shades Toggle

A grayscale face flips to cool sunglasses emoji with a swagger tilt when checked.

#shadow #transform #filter

Live preview Checkboxes

Coral Reef Stone

A pink coral stone with branching texture when checked.

#gradient #shadow #border

Live preview Checkboxes

Cormorant Toggle

A cormorant spins black when checked.

#animation #transform #shadow

Live preview Checkboxes

Corn Cob Toggle

A corn cob brightens yellow with a warm glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Cortado Toggle

A cortado bounces brown on check.

#animation #transform #shadow

Live preview Checkboxes

Cosmic Dust Sparkles

Tiny sparkles of cosmic dust shimmer when checked.

#animation #gradient #transform

Live preview Checkboxes

Cottage Toggle

A garden cottage fades in green when checked.

#transform #shadow #filter

Live preview Checkboxes

Cowbird Toggle

A cowbird pulses brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Crab Pinch Toggle

A crab scuttles with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Cranberry Toggle

A cranberry shakes red when checked.

#animation #transform #shadow

Live preview Checkboxes

Cricket Toggle

A cricket shakes green when checked.

#animation #transform #shadow

Live preview Checkboxes

Cricket Bat Toggle

A cricket bat fades in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Croissant Flaky Toggle

A croissant glows buttery gold when checked.

#animation #transform #shadow

Live preview Checkboxes

Croquet Toggle

A croquet mallet glows green when checked.

#transform #shadow #filter

Live preview Checkboxes

Crow Toggle

A crow fades in black when checked.

#transform #shadow #filter

Live preview Checkboxes

Crown Drop In

A crown emoji drops in from above with a bouncy settle when toggled on.

#animation #shadow #transform

Live preview Checkboxes

Crystal Prism Toggle

A faceted crystal glows with prismatic light when checked.

#gradient #shadow #border

Live preview Checkboxes

Crystal Ball Toggle

A crystal ball glows purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Cuckoo Toggle

A cuckoo glows brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Currant Toggle

A currant bounces red on check.

#animation #transform #shadow

Live preview Checkboxes

Custard Pudding Toggle

A custard glows caramel when checked.

#transform #shadow #filter

Live preview Checkboxes

Cycling Toggle

A bike spins green when checked.

#animation #transform #shadow

Live preview Checkboxes

Daiquiri Toggle

A daiquiri bounces pink on check.

#animation #transform #shadow

Live preview Checkboxes

Darts Toggle

A dartboard spins red when checked.

#animation #transform #shadow

Live preview Checkboxes

Date Fruit Toggle

A date glows brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Deer Grace Toggle

A deer glows tan when checked.

#transform #shadow #filter

Live preview Checkboxes

Department Store Toggle

A department store slides up purple when checked.

#transform #shadow #filter

Live preview Checkboxes

Diamond Sparkle

A diamond emoji shimmers with a cyan glow and gentle rotation when toggled on.

#animation #3d #shadow

Live preview Checkboxes

Discus Throw Toggle

A discus bounces blue on check.

#animation #transform #shadow

Live preview Checkboxes

Dizzy Stars Toggle

Dizzy stars spin with a blue glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Dog Bark Toggle

A dog face bounces with a brown glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Dog Ear Checkbox

The bottom-right corner of the page curls up to mark it as read.

#border #shadow #transform

Live preview Checkboxes

Dolphin Leap Toggle

A dolphin leaps with a cyan glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Domino Tip Checkbox

The upright tile tips over onto its side and settles with a small bounce.

#transform #gradient #shadow

Live preview Checkboxes

Donut Sprinkle Toggle

A donut pops with a sugary pink glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Door Open Toggle

A door glows brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Dot Indicator

A radio-style dot scales into the center of an outlined circle with a pink glow when checked.

#shadow #border #transform

Live preview Checkboxes

Double Tick Mark

Two checkmarks draw in sequence — a WhatsApp-style double-tick when checked.

#border #transform #rotate

Live preview Checkboxes

Dragonfruit Toggle

A dragonfruit bounces pink on check.

#animation #transform #shadow

Live preview Checkboxes

Dung Beetle Toggle

A dung beetle slides in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Durian Toggle

A durian slides in yellow when checked.

#transform #shadow #filter

Live preview Checkboxes

Earwig Toggle

An earwig spins brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Solar Eclipse Toggle

A moon disc slides over a glowing sun when checked.

#gradient #transform #shadow

Live preview Checkboxes

Egg Fry Toggle

An egg flips to reveal a sunny glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Eggplant Glossy Toggle

An eggplant glows purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Egret Toggle

An egret bounces white on check.

#animation #transform #shadow

Live preview Checkboxes

Elderberry Toggle

An elderberry shakes purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Elephant Trumpet Toggle

An elephant glows gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Elevator Doors Checkbox

Two brushed metal doors part in the middle to reveal the lit car behind.

#gradient #transform #border

Live preview Checkboxes

Embossed Press Checkbox

A soft raised pad sinks into the surface and inverts its own light and shade.

#shadow #transform #neumorphism

Live preview Checkboxes

Emoji Reveal Toggle

A face emoji that flips from neutral to a happy grinning face when checked.

#shadow #transform #filter

Live preview Checkboxes

Envelope Mail Toggle

An envelope glows blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Equestrian Toggle

A horse rider fades in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Evergreen Pine Toggle

An evergreen glows forest green when checked.

#transform #shadow #filter

Live preview Checkboxes

Blinking Eye Checkbox

An eyelid slides down over the iris, closing the eye when the box is ticked.

#transform #gradient #shadow

Live preview Checkboxes

Factory Toggle

A factory shakes gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Feather Drift Toggle

A feather drifts with a soft glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Fencing Toggle

A fencer rotates gray on check.

#transform #shadow #filter

Live preview Checkboxes

Ferry Toggle

A ferry floats in with blue glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Fill From Bottom

A square checkbox where a colored block fills upward from the bottom when checked.

#gradient #border #transform

Live preview Checkboxes

Diagonal Fill

A square that fills diagonally with a sweeping gradient when checked.

#gradient #transform #border

Live preview Checkboxes

Fill From Left

A square that fills with color from the left edge when checked.

#gradient #transform #border

Live preview Checkboxes

Radial Fill Burst

A radial color burst expands from center when checked.

#transform #border

Live preview Checkboxes

Fill From Right

A square that fills with color from the right edge when checked.

#gradient #transform #border

Live preview Checkboxes

Sweep Fill

A radar-like sweep that fills the circle when checked.

#gradient #transform #border

Live preview Checkboxes

Wave Fill

A wavy gradient that rises to fill the box when checked.

#gradient #transform #border

Live preview Checkboxes

Finch Toggle

A finch slides in yellow when checked.

#transform #shadow #filter

Live preview Checkboxes

Fire Ant Toggle

A fire ant glows red when checked.

#transform #shadow #filter

Live preview Checkboxes

Firefly Toggle

A firefly flips yellow when checked.

#transform #shadow #filter

Live preview Checkboxes

Fish Swim Toggle

A fish swims with a blue glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Fishing Toggle

A fishing rod shakes blue when checked.

#animation #transform #shadow

Live preview Checkboxes

Flag Wave Toggle

A flag waves red when checked.

#animation #transform #shadow

Live preview Checkboxes

Flamingo Toggle

A flamingo pulses pink when checked.

#animation #transform #shadow

Live preview Checkboxes

Flat Symbol Toggle

A flat music symbol rotates indigo when checked.

#transform #shadow #filter

Live preview Checkboxes

Flat White Toggle

A flat white flips white when checked.

#transform #shadow #filter

Live preview Checkboxes

Flea Toggle

A flea pulses red when checked.

#animation #transform #shadow

Live preview Checkboxes

Flicker Toggle

A flicker spins red when checked.

#animation #transform #shadow

Live preview Checkboxes

3D Flip Card Check

A checkbox that flips in 3D to reveal a green check face when toggled on.

#3d #border #transform

Live preview Checkboxes

Card Flip Reveal

A card-style flip that reveals a checkmark face when checked.

#gradient #transform #border

Live preview Checkboxes

Vertical Card Flip

A vertical 3D flip that reveals the checkmark on the back.

#transform #border #3d

Live preview Checkboxes

Fly Toggle

A fly flips gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Flycatcher Toggle

A flycatcher pulses green when checked.

#animation #transform #shadow

Live preview Checkboxes

Fog Mist Toggle

A fog emoji drifts gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Football Toggle

A football flips brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Fox Sly Toggle

A fox glows orange when checked.

#transform #shadow #filter

Live preview Checkboxes

Frappe Toggle

A frappe slides in amber when checked.

#transform #shadow #filter

Live preview Checkboxes

Frigatebird Toggle

A frigatebird flips black when checked.

#transform #shadow #filter

Live preview Checkboxes

Frog Jump Toggle

A frog jumps with a green glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Fuel Pump Toggle

A fuel pump glows green when checked.

#transform #shadow #filter

Live preview Checkboxes

Fulmar Toggle

A fulmar fades in white when checked.

#transform #shadow #filter

Live preview Checkboxes

Galaxy Spiral Toggle

A galaxy spirals with a violet glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Gallinule Toggle

A gallinule glows purple when checked.

#transform #shadow #filter

Checkboxes effects