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

Live preview Toggles

Anodized Aluminum

Anodized aluminum with vibrant colored oxide layer.

#gradient #transform #shadow

Live preview Toggles

Anonymous / Named

Ghost knob becomes a name tag when identity is revealed.

#transform #shadow

Live preview Toggles

Apple / Banana

Round apple curves into a crescent banana.

#transform #shadow

Live preview Toggles

Aqua Bubble

Floating aqua bubble with iridescent rim glow.

#gradient #transform #shadow

Live preview Toggles

Arcade Coin

Retro arcade coin slot activates when the coin drops.

#gradient #transform #shadow

Live preview Toggles

Armed / Disarmed

Shield arms red or disarms to neutral.

#transform #shadow

Live preview Toggles

Arpeggio / Chord

Three dots light up in sequence (arpeggio) or all at once (chord).

#transform #shadow

Live preview Toggles

Arrow Pierce

Sharp arrow knob pierces through the track when fired.

#gradient #transform #shadow

Live preview Toggles

Ascend / Descend

Knob enlarges and glides as the track warms from gray to amber.

#transform #shadow

Live preview Toggles

Ascend / Peak

Knob ascends diagonally to the peak on toggle.

#transform #shadow

Live preview Toggles

Asteroid Belt

Scattered rocks align into an orbiting belt.

#transform #shadow

Live preview Toggles

Asteroid Spin

Rough asteroid knob tumbles through space when active.

#gradient #transform #shadow

Live preview Toggles

Atom Spin

Electron orbits ignite around a nucleus.

#animation #transform #shadow

Live preview Toggles

Audio On / Off

Speaker emits sound waves or goes silent.

#transform #shadow

Live preview Toggles

Aurora Borealis

Northern lights shimmer over an emerald knob.

#animation #gradient #transform

Live preview Toggles

Aurora Glow

Soft polar aurora glow swells behind the sliding knob.

#gradient #transform #shadow

Live preview Toggles

Aurora Shimmer

Soft aurora shimmer dances across the polar night.

#animation #gradient #transform

Live preview Toggles

Aurora Veil

Northern lights shimmer across the track as the glowing knob slides.

#animation #gradient #transform

Live preview Toggles

Auth / Anonymous

Key auth knob becomes a ghost when anonymous on the indigo track.

#transform #shadow

Live preview Toggles

Autumn / Winter

Autumn leaf turns into a delicate winter snowflake.

#gradient #transform #shadow

Live preview Toggles

Available / Busy

Green available dot turns to an amber busy one.

#transform #shadow

Live preview Toggles

Azure Sky

Clear azure sky blue with drifting cloud knob.

#gradient #transform #shadow

Live preview Toggles

Backup / Restore

Backup disk knob becomes a restore recycle on the teal track.

#transform #shadow

Live preview Toggles

Badge / Clear

Notification badge count clears away to empty.

#animation #transform #shadow

Live preview Toggles

Bamboo Green

Fresh bamboo green stalk with light knob.

#gradient #transform #shadow

Live preview Toggles

Barricade Flip

Construction barricade flips from stop to go.

#gradient #transform #3d

Live preview Toggles

Basic / Expert

Single star upgrades to a triple-star expert rank.

#transform #shadow

Live preview Toggles

Bass / Snare Drum

Bass guitar knob becomes a snare drum on the indigo track.

#transform #shadow

Live preview Toggles

Bass / Treble

Equalizer knobs favor low bass or high treble.

#gradient #transform #shadow

Live preview Toggles

Battery Charge Level

Battery fill bar collapses to a low red sliver when off, full green when on.

#border #transform #switch

Live preview Toggles

Beat / Rest

Knob throbs like a heartbeat while the beat plays.

#animation #transform #shadow

Live preview Toggles

Beat / Silence

Pulsing beat dot flatlines into silence.

#animation #transform #shadow

Live preview Toggles

Beat / Still

Heartbeat knob goes still on the rose track when toggled.

#animation #transform #shadow

Live preview Toggles

Begin / End

Gradient sweeps blue to purple as the knob slides with a subtle skew.

#gradient #transform #shadow

Live preview Toggles

Bell / Silent

Ringing bell tips over with a slash for silent mode.

#animation #transform #shadow

Live preview Toggles

Berth / Sail

Anchored berth knob becomes a sailing boat on the blue track.

#transform #shadow

Live preview Toggles

Beryl Sea

Sea-green beryl gem with aqua clarity.

#gradient #transform #shadow

Live preview Toggles

Bike / Scooter

Bicycle swaps to an electric kick scooter.

#transform #shadow

Live preview Toggles

Binary / Quantum

0/1 binary knob superposes into a quantum sphere on toggle.

#gradient #transform #shadow

Live preview Toggles

Black Hole

Light bends around the gravitational pull of a black hole.

#gradient #transform #shadow

Live preview Toggles

Black / White

Inverts from black-on-white to white-on-black.

#transform #shadow #border

Live preview Toggles

Bloodstone Dark

Dark green bloodstone with red speckles.

#gradient #transform #shadow

Live preview Toggles

Bloom / Wilt

Blooming flower knob wilts on the pink track when toggled.

#transform #shadow #filter

Live preview Toggles

Blue / Orange

Cool blue track warms up to vibrant orange.

#transform #shadow

Live preview Toggles

Bluetooth On / Off

Slide knob with a Bluetooth rune; a red slash cuts through it when disabled.

#border #transform #rotate

Live preview Toggles

Blur Filter Toggle

Text label behind the knob blurs out of focus when the filter is enabled.

#border #transform #filter

Live preview Toggles

Bolt Strike

Lightning bolt crackles across the track when struck.

#animation #gradient #transform

Live preview Toggles

Bolt Tighten

Hexagonal bolt rotates and tightens into place.

#gradient #transform #shadow

Live preview Toggles

Bomb / Mine

Bomb knob becomes a hidden mine on the dark track.

#transform #shadow

Live preview Toggles

Bond / Sever

Handshake bond knob breaks into a shattered heart on toggle.

#transform #shadow

Live preview Toggles

Bored / Excited

Yawning boredom flips to starry-eyed excitement.

#transform #shadow

Live preview Toggles

Boss / Minion

Boss crown knob shrinks to a minion dot on toggle.

#transform #shadow

Live preview Toggles

Bounce / Settle

Knob bounces energetically into place then settles.

#transform #shadow

Live preview Toggles

Bow / Arrow

Bow knob releases an arrow that flies across the track.

#transform #shadow

Live preview Toggles

Branch / Tag

Branch knob becomes a tag on the green track.

#transform #shadow

Live preview Toggles

Brass / Platinum

Yellow brass knob shifts to a cool platinum shine.

#gradient #transform #shadow

Live preview Toggles

Brass / Woodwind

Trumpet knob becomes a saxophone on the gold track.

#transform #shadow

Live preview Toggles

Brave / Scared

Lion roars brave while a mouse scurries scared.

#transform #shadow

Live preview Toggles

Breeze / Still

Leaf sways in a breeze then rests still when off.

#animation #transform #shadow

Live preview Toggles

Bridge / Chorus

Bridge emoji becomes a chorus of people on the teal track.

#transform #shadow

Live preview Toggles

Bridge / Route

Bridge knob becomes a winding route on the cyan track.

#transform #shadow

Live preview Toggles

Bright / Dim

Filter brightness sweeps from full to dim on the amber track.

#transform #shadow #filter

Live preview Toggles

Brighten / Dim

Knob brightens with glow then dims on the yellow track.

#transform #shadow #filter

Live preview Toggles

Sun Brightness Rings

A dim sun ignites and casts two rotating dashed light rings when bright.

#shadow #border #transform

Live preview Toggles

Broadcast / Narrow

Megaphone knob narrows into a target on the orange track.

#transform #shadow

Live preview Toggles

Brocade Pattern

Ornate brocade jacquard pattern with golden threads.

#gradient #transform

Live preview Toggles

Bronze Age

Aged bronze patina with antique knob.

#gradient #transform #shadow

Live preview Toggles

Brushed Steel

Industrial brushed steel with directional grain lines.

#gradient #transform #shadow

Live preview Toggles

Bubble Rise

Air bubbles rise upward through the aquatic track.

#animation #gradient #transform

Live preview Toggles

Build / Test

Hammer build knob becomes a test tube on the amber track.

#transform #shadow

Live preview Toggles

Burger / Pizza

Juicy burger flips to a cheesy pizza slice.

#transform #shadow

Live preview Toggles

Burgundy Rich

Deep burgundy wine with luxurious knob.

#gradient #transform #shadow

Live preview Toggles

Burn / Quench

Fire knob becomes a water droplet when quenched.

#animation #transform #shadow

Live preview Toggles

Burnished Gold

Burnished gold surface with soft satin golden sheen.

#gradient #transform #shadow

Live preview Toggles

Big Red Button

Big red emergency button depresses when pressed.

#gradient #transform #shadow

Live preview Toggles

Cache / Clear

Cabinet knob becomes a trash can when cache is cleared.

#transform #shadow

Live preview Toggles

Cache / DB

Cache cabinet knob becomes a database on the slate track.

#transform #shadow

Live preview Toggles

Cactus Bloom

Desert cactus sprouts a vibrant pink bloom when watered.

#gradient #transform

Live preview Toggles

Cage / Release

Bird cage opens with a sky-blue track as the knob slides free.

#transform #shadow

Live preview Toggles

Calm / Angry

Calm face turns red and furious when toggled.

#animation #transform #shadow

Live preview Toggles

Camera Shutter

Camera lens iris dilates open when the camera is enabled.

#gradient #border #transform

Live preview Toggles

Camouflage / Revealed

Camouflage-pattern track clears to reveal a bright knob.

#gradient #transform #shadow

Live preview Toggles

Candy Stripe Toggle

Playful candy-colored toggle with a striped knob and bouncy spring.

#gradient #shadow #border

Live preview Toggles

Cannon / Turret

Cannon knob rotates into a turret on the gunmetal track.

#transform #shadow

Live preview Toggles

Canvas Weave

Heavy canvas weave with visible coarse threads.

#gradient #transform

Live preview Toggles

Canyon Echo

Canyon walls echo a sound wave across the desert track.

#gradient #transform

Live preview Toggles

Car / Walk

Driving car swaps to a walking pedestrian.

#animation #transform #shadow

Live preview Toggles

Cassette / CD

Cassette tape knob morphs into a CD on the purple track.

#transform #shadow

Live preview Toggles

Cassette Rewind

Cassette reels spin in reverse as the knob slides back.

#animation #gradient #transform

Live preview Toggles

Catch / Release

Glove knob becomes a freed dove on the green track.

#transform #shadow

Live preview Toggles

CDN / Origin

Globe CDN knob becomes an origin house on the indigo track.

#transform #shadow

Live preview Toggles

Celadon Soft

Soft celadon green-grey with sage knob.

#gradient #transform #shadow

Live preview Toggles

Ceramic Glaze

Glossy ceramic glaze with reflective knob.

#gradient #transform #shadow

Live preview Toggles

Cerise Pop

Bright cerise cherry red popping knob.

#gradient #transform #shadow

Live preview Toggles

Character / Real

Cartoon knob becomes a real photo frame on toggle.

#transform #shadow

Live preview Toggles

Charge / Discharge

Battery knob charges green and discharges red on toggle.

#gradient #transform #shadow

Toggles effects