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

Live preview Checkboxes

Church Toggle

A church glows softly white when checked.

#transform #shadow #filter

Live preview Checkboxes

Power On Toggle

A power-symbol checkbox that glows green when powered on, dark when off.

#shadow #border #transform

Live preview Checkboxes

Laptop Work Toggle

A laptop glows blue when checked.

#transform #shadow #filter

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

Plum Color Toggle

A color swatch that fills with plum when checked.

#transform #shadow #border

Live preview Checkboxes

3D Y-Axis Flip

A 3D flip on the Y axis revealing a checkmark on the back face.

#transform #border #3d

Live preview Checkboxes

Yellowjacket Toggle

A yellowjacket spins yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

3D Pyramid Check

A 3D pyramid that flips and turns gold when checked.

#transform #border #3d

Live preview Checkboxes

Accordion Toggle

An accordion expands in red when checked.

#transform #shadow #filter

Live preview Checkboxes

Amber Fossil Stone

A golden amber stone reveals an ancient inclusion when checked.

#gradient #transform #shadow

Live preview Checkboxes

Apartment Toggle

An apartment building scales in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Avocado Ripe Toggle

An avocado glows green when ripe and checked.

#transform #shadow #filter

Live preview Checkboxes

Bacon Sizzle Toggle

A bacon strip wiggles with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Banjo Toggle

A banjo slides in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Battery Charge Toggle

A battery glows green when checked.

#animation #transform #shadow

Live preview Checkboxes

Circle Stroke Draw

An SVG circle outline draws itself around a center dot that pops in when checked.

#border #transform #rotate

Live preview Checkboxes

Espresso Toggle

An espresso pulses brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Hourglass Checkbox

The glass rotates half a turn and the sand settles into the lower bulb.

#clip-path #transform #border

Live preview Checkboxes

Pulsar Radio Beams

Concentric radio waves pulse outward when this star is 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

Scale Pop Checkmark

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

#border #transform #rotate

Live preview Checkboxes

Silverfish Toggle

A silverfish spins gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Sparkle Twinkle

A four-pointed sparkle that twinkles in with a magenta glow and slow spin when checked.

#animation #shadow #border

Live preview Checkboxes

Psi Symbol Toggle

The Greek psi letter slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Tarot Card Reveal

A mystical tarot card flips to reveal its face when checked.

#gradient #transform #border

Live preview Checkboxes

Pickup Truck Toggle

A pickup truck bounces in orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Wifi Signal Toggle

An SVG wifi icon lights up in cyan with a soft glow when the device goes online.

#shadow #border #filter

Live preview Checkboxes

Acai Toggle

An acai spins purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Affogato Toggle

An affogato slides in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Agate Banded Stone

An agate stone with concentric bands glows when checked.

#gradient #shadow #border

Live preview Checkboxes

Agua Fresca Toggle

An agua fresca slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Alarm Clock Toggle

An alarm clock shakes red when checked.

#animation #transform #shadow

Live preview Checkboxes

Albatross Toggle

An albatross glows sky-blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Ambulance Toggle

An ambulance pulses red when checked.

#animation #transform #shadow

Live preview Checkboxes

Amethyst Purple Gem

A purple amethyst crystal sparkles when checked.

#gradient #shadow #border

Live preview Checkboxes

Ant March Toggle

An ant wiggles with a dark glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Aurora Glow Toggle

A box that glows with shifting aurora gradients when checked.

#animation #gradient #transform

Live preview Checkboxes

Balloon Float Toggle

A balloon floats with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Banana Peel Toggle

A banana peel rotates yellow on check.

#transform #shadow #filter

Live preview Checkboxes

Bank Toggle

A bank scales in gold when checked.

#transform #shadow #filter

Live preview Checkboxes

Baseball Toggle

A baseball bounces white on check.

#animation #transform #shadow

Live preview Checkboxes

Bat Fly Toggle

A bat flutters with a dark glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Beamed Sixteenths Toggle

Beamed sixteenth notes scale in teal when checked.

#transform #shadow #filter

Live preview Checkboxes

Bedbug Toggle

A bedbug rotates red on check.

#transform #shadow #filter

Live preview Checkboxes

Bounce Spring Checkmark

A checkmark that pops in with a springy bounce when the checkbox is toggled on.

#border #transform #rotate

Live preview Checkboxes

Bounce Pop Checkbox

The whole control squashes and springs back the moment the state changes.

#animation #transform #border

Live preview Checkboxes

Circuit Trace Checkbox

Current runs along an SVG circuit path and lights the pad at the far end.

#svg #stroke #border

Live preview Checkboxes

Coin Flip Toggle

A coin spins gold when checked.

#transform #shadow #filter

Live preview Checkboxes

Color Sweep Check

A diagonal color sweep wipes across the checkbox leaving the checkmark behind when checked.

#gradient #border #transform

Live preview Checkboxes

Constellation Connect

Stars connect with lines to form a constellation when checked.

#border #svg #stroke

Live preview Checkboxes

Cosmic Ray Beam

A high-energy cosmic ray beam shoots through the box when checked.

#animation #gradient #transform

Live preview Checkboxes

Dragonfly Toggle

A dragonfly slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Drawn Path Checkbox

An SVG tick draws itself stroke by stroke using a dash offset transition.

#border #svg #stroke

Live preview Checkboxes

Duck Toggle

A duck flips orange when checked.

#transform #shadow #filter

Live preview Checkboxes

Emerald Green Gem

A step-cut emerald shows deep green facets when checked.

#gradient #shadow #border

Live preview Checkboxes

Falcon Toggle

A falcon shakes brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Fig Toggle

A fig fades in purple when checked.

#transform #shadow #filter

Live preview Checkboxes

Fold Flip Checkbox

The box rotates on its X axis and lands on a green face carrying the tick.

#transform #border #3d

Live preview Checkboxes

Frosted Glass Checkbox

The blur lifts off a frosted pane and the mark behind it comes into focus.

#filter #gradient #border

Live preview Checkboxes

Giraffe Tall Toggle

A giraffe brightens with a yellow glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Glassmorphism Rose

A frosted glass effect with rose tint and checkmark when checked.

#transform #shadow #border

Live preview Checkboxes

Has-Selector Select All

The parent row reads its children through :has() and reports partial or full.

#border #shadow #transform

Live preview Checkboxes

Jasper Spotted Stone

A red jasper stone with speckled pattern appears when checked.

#gradient #shadow #border

Live preview Checkboxes

Leaf Grow Toggle

A leaf emoji grows in from a small scale with a green glow when checked.

#shadow #transform #filter

Live preview Checkboxes

Leaf Miner Toggle

A leaf miner flips green when checked.

#transform #shadow #filter

Live preview Checkboxes

Lever Pull Checkbox

A mechanical lever swings from the off notch down into the on notch.

#transform #border #lever

Live preview Checkboxes

Long Drum Toggle

A long drum shakes in orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Minimal Line Check

A clean, borderless minimal check whose mark fades in softly when toggled on.

#border #transform #rotate

Live preview Checkboxes

Motorcycle Toggle

A motorcycle bounces in with cool glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Number 1 Toggle

Number 1 scales up blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Paw Print Toggle

A grayscale paw-print emoji fills in and pads down with a warm glow when toggled on.

#shadow #transform #filter

Live preview Checkboxes

Plug Power Toggle

A plug glows yellow when checked.

#transform #shadow #filter

Live preview Checkboxes

Plum Toggle

A plum flips purple when checked.

#transform #shadow #filter

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

Scanline Checkbox

A bright scan line sweeps down the box and leaves solid colour behind it.

#animation #clip-path #gradient

Live preview Checkboxes

Scissors Cut Toggle

Scissors snip with a gray glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Sun Brighten Toggle

A dim sun emoji brightens and slowly rotates with a warm yellow glow when checked.

#animation #shadow #transform

Live preview Checkboxes

Sunset Dusk Toggle

A sunset glows warm when checked.

#transform #shadow #filter

Live preview Checkboxes

Minus Math Symbol Toggle

A minus math symbol that turns red when checked.

#transform #shadow #filter

Live preview Checkboxes

Omega Symbol Toggle

The Greek omega letter fades violet when checked.

#shadow #filter

Live preview Checkboxes

Theta Symbol Toggle

The Greek theta letter scales pink when checked.

#transform #shadow #filter

Live preview Checkboxes

Glass Texture Toggle

A frosted glass texture with blue tint when checked.

#gradient #transform #shadow

Live preview Checkboxes

Storm Crash Toggle

A thunderstorm shakes yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Tornado Spin Toggle

A tornado spins gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Willet Toggle

A willet flips gray when checked.

#transform #shadow #filter

Live preview Checkboxes

3D Cone Check

A 3D cone that turns pink when checked with a glow.

#shadow #border #filter

Live preview Checkboxes

3D Cube Check

A rotating 3D cube that turns green when checked.

#transform #border #3d

Live preview Checkboxes

3D Cylinder Check

A 3D cylinder that rotates and turns blue when checked.

#gradient #transform #shadow

Live preview Checkboxes

3D Sphere Check

A shaded 3D sphere that lights up when checked.

#gradient #transform #shadow

Live preview Checkboxes

Airplane Fly Toggle

An airplane flies across with sky glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Americano Toggle

An americano glows brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Anchor Dock Toggle

An anchor glows blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Aphid Toggle

An aphid glows green when checked.

#transform #shadow #filter

Live preview Checkboxes

Apple Crunch Toggle

An apple brightens red with a fresh glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Red Apple Toggle

A red apple glows crimson when checked.

#transform #shadow #filter