Toggles — 860 CSS effects

Toggle controls with clear states and refined transitions.

Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.

Page 6 of 9

Live preview Toggles

Lace Trim

Delicate lace trim pattern along the elegant track.

#gradient #transform

Live preview Toggles

Lantern Glow

Paper lantern knob warms with a soft amber glow when lit.

#gradient #transform #shadow

Live preview Toggles

Latch Clip

Mechanical latch clicks open and snaps closed.

#gradient #transform #shadow

Live preview Toggles

Latex Shine

Glossy latex surface with high-shine reflective finish.

#gradient #transform #shadow

Live preview Toggles

Laugh / Tears

Neutral face erupts into tears of joy.

#animation #transform #shadow

Live preview Toggles

Launch / Land

Rocket knob lifts off vertically with sky-to-space track gradient swap.

#gradient #transform #shadow

Live preview Toggles

Lava Flow

Molten lava texture flows across the track with a hot ember knob.

#animation #gradient #transform

Live preview Toggles

Lavender Mist

Dreamy lavender gradient with soft purple glow.

#gradient #transform #shadow

Live preview Toggles

Lead / Rhythm

Star knob becomes a target as the lead swaps to rhythm.

#transform #shadow

Live preview Toggles

Leader / Follower

Compass leader knob becomes followers on the cyan track.

#transform #shadow

Live preview Toggles

Leaf Fall

Green leaf detaches and drifts down autumn-orange.

#gradient #transform #shadow

Live preview Toggles

Leather Grain

Premium full-grain leather texture with rich patina.

#gradient #transform #shadow

Live preview Toggles

Leather / Suede

Glossy leather knob softens to matte suede on toggle.

#gradient #transform #shadow

Live preview Toggles

Left / Right

Arrow points left then swings to point right.

#transform #shadow

Live preview Toggles

Level / Rank

Level-up arrow knob becomes a rank chevron on toggle.

#transform #shadow

Live preview Toggles

Lever Pull

Industrial lever pulls down to engage the mechanism.

#gradient #transform #shadow

Live preview Toggles

Light / Dark Mode

Sun gives way to a crescent moon for dark mode.

#gradient #transform #shadow

Live preview Toggles

Lightbulb On / Off

A lightbulb that flickers to life with a warm glow and radiating rays when toggled on.

#gradient #glass #shadow

Live preview Toggles

Lighten / Darken

Knob lightens then darkens with filter on the slate track.

#transform #shadow #filter

Live preview Toggles

Lightning Strike

Lightning bolt strikes from cloud to ground when active.

#animation #gradient #transform

Live preview Toggles

Like / Dislike

Thumbs up flips down into a dislike.

#transform #shadow

Live preview Toggles

Linear / Circular

Square knob morphs into a circle with a curved track sweep.

#transform #shadow

Live preview Toggles

Linen Weave

Natural linen weave texture with crosshatch pattern.

#gradient #transform

Live preview Toggles

Link / Break

Chain knob shatters when the link breaks on the red track.

#transform #shadow

Live preview Toggles

Liquid Slide Toggle

The knob stretches as it travels and snaps back to a circle at the far end.

#transform #border

Live preview Toggles

Listen / Speak

Ear flips to a mouth for voice input vs output.

#transform #shadow

Live preview Toggles

Lo-Fi / Hi-Fi

Radio knob becomes a hi-fi speaker on the blue track.

#transform #shadow

Live preview Toggles

Load / Dump

Load inbox knob becomes a dump truck on the slate track.

#transform #shadow

Live preview Toggles

Load / Unload

Truck knob rolls across the slate track with a slight tilt.

#transform #shadow

Live preview Toggles

Loaded / Vacant

Cargo box knob swaps to an open door on the amber-to-slate track.

#transform #shadow

Live preview Toggles

Loading / Done

Spinning loader resolves into a checkmark on completion.

#animation #transform #shadow

Live preview Toggles

Location Pin Pulse

Map pin turns red and emits an expanding ripple ring when sharing location.

#animation #border #transform

Live preview Toggles

Padlock Lock / Unlock

Padlock body changes color and the shackle swings open when unlocked.

#shadow #border #transform

Live preview Toggles

Locked / Unlocked

Padlock snaps shut then springs open.

#transform #shadow

Live preview Toggles

Loud / Soft

Knob shrinks to soft and grows to loud with red-to-blue track.

#transform #shadow

Live preview Toggles

Love Heart

Broken heart heals and beats red when loved.

#animation #transform #shadow

Live preview Toggles

Low / High

Single bar grows into a stacked high-signal indicator.

#transform #shadow

Live preview Toggles

Magenta Pulse

Pulsing magenta glow around a hot pink knob.

#animation #gradient #transform

Live preview Toggles

Magic / Melee

Sparkle magic knob becomes a fist for melee on toggle.

#transform #shadow

Live preview Toggles

Magic / Tech

Sparkle magic knob becomes a circuit chip on toggle.

#transform #shadow

Live preview Toggles

Magnet Attract

Knob snaps across with a magnetic attraction pull.

#transform #shadow

Live preview Toggles

Magnet Poles

Horseshoe magnet flips between north and south poles.

#transform #shadow

Live preview Toggles

Magnet / Repel

Magnet knob repels away on the steel track when toggled.

#transform #shadow

Live preview Toggles

Magnetic Knob Toggle

Knob snaps across with a magnetic overshoot and attraction glow.

#gradient #shadow #border

Live preview Toggles

Mahogany Rich

Rich mahogany wood with deep brown knob.

#gradient #transform #shadow

Live preview Toggles

Major / Minor

Happy face knob turns sad as the key switches to minor.

#transform #shadow

Live preview Toggles

Map / Compass

Treasure map knob becomes a compass on the parchment track.

#transform #shadow

Live preview Toggles

Maple Leaf

Maple leaf knob shifts from green to autumn red.

#gradient #transform

Live preview Toggles

Marble / Granite

Veined marble knob shifts to a speckled granite pattern.

#gradient #transform #shadow

Live preview Toggles

Marble Statue

White marble statue with classic veining.

#gradient #transform #shadow

Live preview Toggles

Marble Veined

White marble with elegant grey veining pattern.

#gradient #transform

Live preview Toggles

Mask / Unmask

Theatre mask morphs into a smiley face on the purple track.

#transform #shadow

Live preview Toggles

Matte / Glossy

Matte knob gains a glossy highlight reflection on toggle.

#gradient #transform #shadow

Live preview Toggles

Mauve Dusk

Mauve dusty purple with twilight knob.

#gradient #transform #shadow

Live preview Toggles

Mech / Organic

Mech robot knob becomes an organic leaf on toggle.

#transform #shadow

Live preview Toggles

Mech Shift

Mechanical panels shift and realign when transforming.

#gradient #transform #shadow

Live preview Toggles

Medieval / Future

Castle knob becomes a futuristic cityscape on toggle.

#transform #shadow

Live preview Toggles

Melody / Silence

Melody notes become a hush face on the violet track.

#transform #shadow

Live preview Toggles

Melt / Solidify

Liquid blob knob solidifies into a square on toggle.

#transform #shadow

Live preview Toggles

Mercury Bubble

Liquid mercury silver with floating bubble knob.

#gradient #transform #shadow

Live preview Toggles

Merge / Split

Merge arrows knob becomes split scissors on the blue track.

#transform #shadow

Live preview Toggles

Mesh Grid

Sport mesh fabric with breathable grid pattern.

#gradient #transform

Live preview Toggles

Metallic / Pearl

Metallic knob shifts to a soft pearlescent sheen on toggle.

#gradient #transform #shadow

Live preview Toggles

Meteor Burst

Meteor impact bursts with sparks and debris when struck.

#gradient #transform #shadow

Live preview Toggles

Meteor Shower

Meteors streak across the night sky when active.

#animation #gradient #transform

Live preview Toggles

Metronome Tick

Metronome arm ticks back and forth keeping the beat.

#animation #gradient #transform

Live preview Toggles

Mic / Stand

Microphone knob becomes a stop hand on the orange track.

#transform #shadow

Live preview Toggles

Midnight Bloom

Midnight blue track with blooming star knob.

#gradient #transform #shadow

Live preview Toggles

Minimal / Detailed

Single dot blooms into a detailed sparkle cluster.

#transform #shadow

Live preview Toggles

Mirror / Flip

Knob mirrors itself with a horizontal flip.

#gradient #transform #shadow

Live preview Toggles

Mirror Shine

Polished chrome knob slides with a sweeping reflection.

#animation #gradient #transform

Live preview Toggles

Mist Clear

Atmospheric mist clears to reveal what was hidden.

#gradient #transform #filter

Live preview Toggles

Modem Dial

Vintage rotary modem dial spins to connect.

#gradient #transform #shadow

Live preview Toggles

Mono / Stereo

Single knob splits into a mirrored pair for stereo mode.

#transform #shadow

Live preview Toggles

Moon Crater

Cratered moon surface knob shifts in the lunar sky.

#gradient #transform

Live preview Toggles

Moon Phase

New moon waxes to a full moon as the knob slides.

#transform #shadow

Live preview Toggles

Moonstone Glow

Moonstone with soft adularescent sheen.

#gradient #transform #shadow

Live preview Toggles

Moor / Cast Off

Sailboat knob glides fully across the teal track when casting off.

#transform #shadow

Live preview Toggles

Morning / Evening

Rooster crows at dawn, owl hoots at dusk.

#gradient #transform #shadow

Live preview Toggles

Mosaic Tile

Pixelated mosaic tiles shift colors across the track.

#gradient #transform

Live preview Toggles

Mount / Dismount

Horse mount knob becomes a walking figure when dismounted.

#transform #shadow

Live preview Toggles

Mountain / Valley

Peak rises high then dips down into a green valley.

#gradient #transform #shadow

Live preview Toggles

Mushroom Grow

Mushroom sprouts from the ground when conditions are right.

#gradient #transform

Live preview Toggles

Speaker Mute / Unmute

Speaker sound waves pulse out when unmuted and a red slash appears when muted.

#border #transform #clip-path

Live preview Toggles

Narrow / Wide

Thin bar widens out to fill more of the track.

#transform #shadow

Live preview Toggles

Nebula Cloud

Cosmic nebula cloud swirls with pink and purple hues.

#gradient #transform #shadow

Live preview Toggles

Needle Gauge

Pressure gauge needle swings to green zone when active.

#gradient #transform

Live preview Toggles

Needle / Laser

Record needle knob becomes a laser dot on the red track.

#transform #shadow

Live preview Toggles

Needle Spin

Compass needle knob spins to point a different direction.

#gradient #transform #shadow

Live preview Toggles

Neon Plasma Switch

Dark cyberpunk switch with a glowing neon knob and electric arc effect.

#gradient #glow #shadow

Live preview Toggles

Neoprene Flex

Stretchy neoprene material with subtle flex animation.

#animation #gradient #transform

Live preview Toggles

New / Old

Sparkling new badge fades to a vintage clock.

#transform #shadow

Live preview Toggles

Noise / Clean

Grainy noise track clears into a clean surface.

#gradient #transform #shadow

Live preview Toggles

Normal / Incognito

Smiley dons a disguise for incognito browsing.

#transform #shadow

Live preview Toggles

North / South

Compass needle swings between north and south.

#gradient #transform #shadow

Live preview Toggles

Note / Rest

Eighth note switches to a rest symbol for silence.

#transform #shadow