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

Live preview Toggles

Microphone Live

Microphone glows red and emits pulsing sound waves when live.

#animation #border #transform

Live preview Toggles

Minimal Line Toggle

Ultra-minimal outline toggle where only the knob border and track line shift.

#border #transform #switch

Live preview Toggles

Mint Fresh

Fresh mint green track with crisp white knob.

#gradient #transform #shadow

Live preview Toggles

On / Off Power

Power symbol lights up when the device is on.

#transform #shadow

Live preview Toggles

Plasma Bolt

Electric plasma bolt crackles between two posts when active.

#animation #gradient #transform

Live preview Toggles

Play / Pause Button

Circular media button morphs a play triangle into two pause bars.

#border #switch

Live preview Toggles

Pulse / Throb

Steady knob starts throbbing with a heartbeat pulse.

#animation #transform #shadow

Live preview Toggles

Quake / Stable

Quaking knob stabilizes on the brown track when toggled.

#animation #transform #shadow

Live preview Toggles

Radar Sweep

Radial sweep rotates across the dark scope as the knob moves.

#animation #gradient #transform

Live preview Toggles

Retro Rocker Switch

Vintage panel rocker switch that tilts diagonally between ON and OFF positions.

#gradient #shadow #border

Live preview Toggles

Reverb / Dry

Knob gains a ghostly echo trail in reverb mode.

#transform #shadow

Live preview Toggles

Rhythm / Pause

Knob pulses to a rhythm while playing and freezes on pause.

#animation #transform #shadow

Live preview Toggles

Rigid / Flexible

Rigid knob wobbles elastically when toggled to flexible.

#animation #transform #shadow

Live preview Toggles

Roll / Halt

Wheel knob spins while rolling and stops dead when halted.

#animation #gradient #transform

Live preview Toggles

Seal / Open

Red wax seal breaks into a pin marker on toggle.

#transform #shadow

Live preview Toggles

Shake / Stable

Wobbly knob settles into a stable still position.

#animation #transform #shadow

Live preview Toggles

Sharp / Flat

Sharp symbol morphs into a flat symbol on the rose track.

#transform #shadow

Live preview Toggles

Shield Up

Energy shield activates with a protective glow barrier.

#gradient #transform #shadow

Live preview Toggles

Short / Tall

Short knob stretches tall as it slides across.

#transform #shadow

Live preview Toggles

Shuriken / Boomerang

Spinning shuriken knob becomes a returning boomerang.

#animation #transform #shadow

Live preview Toggles

Smooth iOS Slide

Classic iOS-style toggle with a smooth knob slide and color fade.

#shadow #border #transform

Live preview Toggles

Spell / Rune

Sparkle spell knob becomes a glowing rune on the indigo track.

#transform #shadow

Live preview Toggles

Squish Knob Toggle

The knob flattens against the track mid-travel and rounds out again on arrival.

#animation #transform #border

Live preview Toggles

Staccato / Legato

Dotted track connects into a smooth legato line on toggle.

#gradient #transform #shadow

Live preview Toggles

String / Percussion

Violin knob becomes a drum on the rose track.

#transform #shadow

Live preview Toggles

Sun / Moon Sky Slide

Orb crosses a gradient sky from blue day to indigo night, swapping its glow.

#gradient #shadow #border

Live preview Toggles

Sync / Async

Spinning sync knob pauses into an async state on toggle.

#animation #transform #shadow

Live preview Toggles

Sync Spin

Two arrows form a sync circle that spins while syncing.

#animation #transform #shadow

Live preview Toggles

Tarnished Silver

Tarnished silver with dark oxidation patina around the edges.

#gradient #transform #shadow

Live preview Toggles

Tempo Slow / Fast

Knob spins slow when off and accelerates when toggled on.

#animation #gradient #transform

Live preview Toggles

Tether / Untether

Chain link breaks into scissors on the slate track.

#transform #shadow

Live preview Toggles

Thunder Storm

Lightning bolt crackles to life on a stormy track.

#animation #gradient #transform

Live preview Toggles

Titanium / Chrome

Dark titanium knob polishes to a mirror chrome finish.

#gradient #transform #shadow

Live preview Toggles

Titanium Forged

Forged titanium with hardened steel knob.

#gradient #transform #shadow

Live preview Toggles

Tom / Cymbal

Tom drum knob becomes a sparkling cymbal on the teal track.

#transform #shadow

Live preview Toggles

Topaz Sun

Golden topaz with sun-yellow glow.

#gradient #transform #shadow

Live preview Toggles

Tornado Spin

Tornado icon spins up when the storm toggle activates.

#animation #transform #shadow

Live preview Toggles

Traffic Light Toggle

A horizontal traffic light slider where the knob moves from red stop to green go.

#gradient #shadow #border

Live preview Toggles

Train / Bus

Rail train switches to a road bus route.

#transform #shadow

Live preview Toggles

Tree / Bare

Leafy tree sheds its canopy to a bare winter skeleton.

#gradient #transform #shadow

Live preview Toggles

Tremor / Calm

Tremoring knob calms down on the violet track.

#animation #transform #shadow

Live preview Toggles

Tube Amp

Vacuum tube glows warm orange when the amp powers up.

#gradient #transform #shadow

Live preview Toggles

Tune / Mute

Musical note knob becomes a mute speaker on the indigo track.

#transform #shadow

Live preview Toggles

Turbine Spin

Power turbine blades spin to generate energy.

#animation #gradient #transform

Live preview Toggles

Umbrella Open

Knob transforms into a canopy as rain appears on the track.

#gradient #transform

Live preview Toggles

Veil / Reveal

Translucent knob fades into full opacity as the foggy track clears.

#transform #shadow

Live preview Toggles

Velour Soft

Plush velour texture with deep pile soft surface.

#gradient #transform #shadow

Live preview Toggles

Velvet / Linen

Velvet knob transitions to a woven linen texture on toggle.

#gradient #transform #shadow

Live preview Toggles

Verse / Refrain

Book knob becomes a repeat sign on the amber track.

#transform #shadow

Live preview Toggles

Violet Storm

Dark violet storm clouds with electric purple knob.

#gradient #transform #shadow

Live preview Toggles

Visible / Hidden

Eye opens to reveal content or closes to hide it.

#transform #shadow

Live preview Toggles

VPN / LAN

Shield VPN knob becomes a house LAN on the green track.

#transform #shadow

Live preview Toggles

Wand / Staff

Magic wand knob becomes a powerful staff on the violet track.

#transform #shadow

Live preview Toggles

Watch / Interact

Passive eye becomes an active pointer hand.

#transform #shadow

Live preview Toggles

Wave / Tide

Wave knob swells into a high tide on the blue track.

#transform #shadow

Live preview Toggles

Win / Lose

Trophy gleams for a win, broken for a loss.

#gradient #transform #shadow

Live preview Toggles

Win / Lose RNG

Trophy knob becomes a loss X with a roll-the-dice feel.

#animation #transform #shadow

Live preview Toggles

Wrap / Unwrap

Gift box emoji unwraps into an empty box when toggled.

#transform #shadow

Live preview Toggles

X-Ray Vision

Skeleton pattern reveals through the track when x-rayed.

#animation #gradient #transform

Live preview Toggles

Zircon Spark

Zircon crystal with diamond-bright spark.

#animation #gradient #transform

Live preview Toggles

Zoom Lens

Camera lens zooms in with aperture ring adjusting.

#gradient #transform #shadow

Live preview Toggles

1P / 2P

Single-player mode becomes two-player co-op.

#transform #shadow

Live preview Toggles

Acid Drip

Toxic green knob leaves a corrosive trail as it slides.

#gradient #transform #shadow

Live preview Toggles

Acorn Fall

Acorn knob tumbles from the oak tree across the autumn track.

#animation #gradient #transform

Live preview Toggles

Acoustic / Electric

Acoustic guitar plugs in to become electric.

#transform #shadow

Live preview Toggles

Acoustic / Mute

Acoustic guitar knob becomes a mute speaker on the green track.

#transform #shadow

Live preview Toggles

Acrylic Clear

Transparent acrylic knob with sharp glossy edges.

#gradient #transform #shadow

Live preview Toggles

Agate Band

Banded agate with layered color stripes.

#gradient #transform #shadow

Live preview Toggles

Airplane Mode

Signal bars disappear and an airplane swoops in when airplane mode is on.

#border #transform #rotate

Live preview Toggles

Alarm / Snooze

Shaking alarm clock settles into a snooze Z.

#animation #transform #shadow

Live preview Toggles

Alexandrite Shift

Alexandrite color-shift from green to red-violet.

#gradient #transform #shadow

Live preview Toggles

Allegro / Adagio

Knob spins fast (allegro) or slow (adagio) on the emerald track.

#animation #gradient #transform

Live preview Toggles

Allow / Block

Allow check knob becomes a block sign on the rose track.

#transform #shadow

Live preview Toggles

Ally / Enemy

Ally handshake knob becomes an enemy fist on toggle.

#transform #shadow

Live preview Toggles

AM / PM

Morning AM flips to evening PM with a sun arc.

#gradient #transform #shadow

Live preview Toggles

Amber Fossil

Amber fossil with trapped prehistoric inclusion.

#gradient #transform #shadow

Live preview Toggles

Amber Sun

Amber sun glow with radiant warm knob.

#gradient #transform #shadow

Live preview Toggles

Amber Veil

Soft amber veil with honey-tinted knob.

#gradient #transform #shadow

Live preview Toggles

Amethyst / Citrine

Purple amethyst knob shifts to a sunny citrine yellow.

#gradient #transform #shadow

Live preview Toggles

Amethyst Spark

Sparkling amethyst purple with crystal facet.

#gradient #transform #shadow

Live preview Toggles

Anchor / Drift

Anchor knob morphs into a speedboat as the track lightens.

#transform #shadow

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