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

Live preview Toggles

Active / Inactive

Pulsing green dot signals active vs a still grey one.

#animation #transform #shadow

Live preview Toggles

Frozen / Melted

Frozen ice knob melts into a puddle shape on the cyan track.

#transform #shadow

Live preview Toggles

Equalizer Wave

Flat bars bounce into an animated equalizer.

#animation #transform #shadow

Live preview Toggles

Hot / Cold

Flame turns to a snowflake as the temperature flips.

#gradient #transform #shadow

Live preview Toggles

Arrow / Dots

Solid arrow dissolves into a row of dots.

#transform #shadow

Live preview Toggles

Terminal Prompt

Blinking cursor at a shell prompt toggles to a check output.

#animation #transform #shadow

Live preview Toggles

Tether / Untether Device

Phone knob releases its tether cable on toggle.

#transform #shadow

Live preview Toggles

Awake / Tired

Wide-awake eye closes into a sleepy yawn.

#transform #shadow

Live preview Toggles

Bit Flip

Binary bit flips between 0 and 1 in monospace green.

#transform #shadow #border

Live preview Toggles

Obsidian Volcanic

Volcanic obsidian glass with smoke sheen.

#gradient #transform #shadow

Live preview Toggles

Whirl Pool

Spinning whirlpool swirls water around the knob.

#animation #gradient #transform

Live preview Toggles

Burlap Rough

Rough burlap surface with rustic coarse fibers.

#gradient #transform

Live preview Toggles

Cinnabar Red

Ancient cinnabar red with carved stone knob.

#gradient #transform #shadow

Live preview Toggles

Citrine Glow

Glowing citrine yellow with golden warmth.

#gradient #transform #shadow

Live preview Toggles

Coins / Gems

Gold coin stash converts to sparkling gems.

#gradient #transform #shadow

Live preview Toggles

Crimson Flame

Burning crimson flame with flickering glow.

#gradient #transform #shadow

Live preview Toggles

Crossbow / Slingshot

Crossbow knob becomes a slingshot on the brown track.

#transform #shadow

Live preview Toggles

Dense / Sparse

Dense dot texture spreads out into a sparse pattern on toggle.

#gradient #transform #shadow

Live preview Toggles

Dive / Surface

Diver knob surfaces to an island on the cyan track.

#transform #shadow

Live preview Toggles

Hematite Iron

Hematite iron-black with metallic sheen.

#gradient #transform #shadow

Live preview Toggles

Liquid Wave Fill

Track fills with an animated wavy liquid that sloshes as the knob slides.

#animation #shadow #border

Live preview Toggles

OKLCH Heat Toggle

Off and on colours sit at the same OKLCH lightness, so only the hue appears to move.

#transform #shadow #oklch

Live preview Toggles

Safe / Danger

Green shield flips to a red warning triangle.

#animation #transform #shadow

Live preview Toggles

Teleport / Blink

Knob teleports across with a fading blink step.

#transform #shadow

Live preview Toggles

Tone / Dead

Sound tone knob becomes a skull when the tone goes dead.

#transform #shadow

Live preview Toggles

Tornado Form

Tornado funnel cloud forms spinning across the track.

#animation #gradient #transform

Live preview Toggles

Tourmaline Stripe

Tourmaline watermelon stripe with pink-green knob.

#gradient #transform #shadow

Live preview Toggles

Trap / Free

Mousetrap knob releases a tiny mouse when toggled on.

#transform #shadow

Live preview Toggles

Treble / Bass Clef

Treble clef knob drops to a bass clef on the violet track.

#transform #shadow

Live preview Toggles

Weekend / Weekday

Party weekend swaps to a focused weekday briefcase.

#transform #shadow

Live preview Toggles

Wool / Cotton

Wool knob becomes a fluffy cotton ball on the cream track.

#transform #shadow

Live preview Toggles

Yarn Unwind

Knobby yarn ball rolls across leaving a thread behind.

#gradient #transform

Live preview Toggles

Amethyst Violet

Amethyst violet crystal with mystic glow.

#gradient #transform #shadow

Live preview Toggles

Arrive / Depart

Arrow-shaped knob slides with a motion blur filter as track turns blue.

#transform #shadow #filter

Live preview Toggles

Bellows Expand

Camera bellows expand and contract as the knob moves.

#gradient #transform

Live preview Toggles

Binary Flow

Binary digits stream across the track as data flows.

#animation #gradient #transform

Live preview Toggles

Buoyant / Sinking

Buoyant knob floats then sinks beneath the water on toggle.

#gradient #transform #shadow

Live preview Toggles

Butterfly / Cocoon

Cocoon bursts open into a fluttering butterfly.

#animation #gradient #transform

Live preview Toggles

Charcoal Matte

Matte charcoal black with no-shine knob.

#gradient #transform #shadow

Live preview Toggles

Co-op / Versus

Cooperative dots become a versus symbol on toggle.

#transform #shadow

Live preview Toggles

Cog Mesh

Two interlocking cogwheels rotate together when engaged.

#animation #gradient #transform

Live preview Toggles

Coin / Token

Gold coin knob becomes a colored token on the amber track.

#transform #shadow

Live preview Toggles

Compact / Spacious

Tight knob expands to a wider spacious layout.

#transform #shadow

Live preview Toggles

Copper / Silver

Warm copper knob cools into a bright silver finish.

#gradient #transform #shadow

Live preview Toggles

Coral Pearl

Coral pink with pearlescent shimmer knob.

#gradient #transform #shadow

Live preview Toggles

Coral Sunset

Warm coral to sunset orange fade toggle.

#gradient #transform #shadow

Live preview Toggles

CPU Load Meter

Animated bars visualize CPU load rising as the toggle activates.

#gradient #transform #shadow

Live preview Toggles

Crown / Scepter

Crown knob becomes a scepter on the royal gold track.

#transform #shadow

Live preview Toggles

Cube Roll 3D

Sharp cube knob rolls end-over-end across the dark track in 3D.

#gradient #transform #shadow

Live preview Toggles

Cyan Wave

Cyan wave pattern with aqua glow knob.

#gradient #transform #shadow

Live preview Toggles

Dawn / Dusk

Horizon glows pink at dawn and purple at dusk.

#gradient #transform #shadow

Live preview Toggles

Debug / Release

Bug debug knob becomes a release rocket on the green track.

#transform #shadow

Live preview Toggles

Open / Closed Door

Wooden door swings open on a hinge with a 3D perspective rotation.

#gradient #3d #border

Live preview Toggles

Dots / Stripes

Patterned track morphs from polka dots to stripes.

#gradient #transform #shadow

Live preview Toggles

Download / Upload

Down arrow flips to an up arrow for transfer direction.

#transform #shadow

Live preview Toggles

Draft / Published

Pencil draft rolls into a published newspaper.

#transform #shadow

Live preview Toggles

Drag / Fling

Knob slides gently on drag and flings with overshoot on toggle.

#transform #shadow

Live preview Toggles

Easy / Hard

Smooth path turns into a jagged difficult one.

#transform #shadow

Live preview Toggles

Ebony Night

Pure ebony black night with starlight knob.

#gradient #transform #shadow

Live preview Toggles

Solar Eclipse

Moon slides in front of the sun to create an eclipse.

#gradient #transform #shadow

Live preview Toggles

Eclipse Ring

Moon eclipses the sun with a glowing corona ring.

#gradient #transform #shadow

Live preview Toggles

Emoji Mood Toggle

Sad face morphs into a happy face as the knob slides across the track.

#gradient #shadow #border

Live preview Toggles

Engrave / Relief

Engraved-inset knob flips to a raised relief on toggle.

#transform #shadow

Live preview Toggles

Enter / Exit

Door-enter arrow reverses to an exit sign.

#transform #shadow

Live preview Toggles

Error / Success

Red X failure morphs to a green check success.

#transform #shadow

Live preview Toggles

Eye Open / Closed

An eyelid slides down to close the eye when toggled off, with pupil shift.

#gradient #border #transform

Live preview Toggles

Fantasy / Sci-Fi

Dragon knob becomes a UFO on the cosmic track.

#transform #shadow

Live preview Toggles

Fill / Drain

Liquid fill rises inside the track as the knob floats to the right.

#transform #shadow

Live preview Toggles

Flag / Check

Red flag converts to a green check when resolved.

#transform #shadow

Live preview Toggles

Flap / Still

Flapping wing knob goes still on the amber track.

#animation #transform #shadow

Live preview Toggles

Flip Card Toggle

The switch is a small card that rotates in 3D to show its opposite coloured face.

#transform #3d

Live preview Toggles

Focused / Distracted

Target stays centered when focused, scatters when distracted.

#animation #transform #shadow

Live preview Toggles

Fog Roll

Thick fog rolls across the eerie track obscuring the knob.

#animation #gradient #transform

Live preview Toggles

Free / Occupied

Vacant sign flips to occupied restroom style.

#transform #shadow

Live preview Toggles

Freeze / Thaw

Snowflake melts into a droplet as the cyan track warms to blue.

#transform #shadow

Live preview Toggles

Full / Empty

Vertical fill bar drains from full to empty as the knob drops.

#gradient #transform #shadow

Live preview Toggles

Fullscreen / Window

Expand arrows toggle to a windowed restore.

#transform #shadow

Live preview Toggles

Gem / Jewel

Raw gem knob cuts into a faceted jewel on the rose track.

#transform #shadow

Live preview Toggles

Geyser Spout

Geothermal geyser spouts water high into the air.

#gradient #transform #shadow

Live preview Toggles

Glass / Metal

Frosted glass knob turns to a brushed metal finish.

#gradient #transform #border

Live preview Toggles

Glass / Rubber

Translucent glass knob turns into opaque rubber on toggle.

#transform #shadow

Live preview Toggles

Graphite / Diamond

Dull graphite knob crystallizes into a sparkling diamond.

#gradient #transform #shadow

Live preview Toggles

Graphite Pulse

Graphite dark with pulsing inner glow.

#animation #gradient #transform

Live preview Toggles

Halo Ring

A radiant ring expands around the knob as it lights up the track.

#gradient #transform #shadow

Live preview Toggles

Harmony / Dissonance

Knob jitters with a chaotic animation when dissonance is on.

#animation #transform #shadow

Live preview Toggles

Has-Selector Settings Toggle

Switching on expands an extra options panel below it, using :has() and grid rows.

#transform #border #has-selector

Live preview Toggles

Hot / Cold Drink

Hot mug transitions to an iced beverage.

#gradient #transform #shadow

Live preview Toggles

Iris Shutter

Lens-like track opens to reveal the knob inside the iris.

#gradient #transform

Live preview Toggles

Jelly Wobble

Soft jelly knob wobbles with a bouncy spring animation.

#animation #gradient #transform

Live preview Toggles

Vintage Lever Pull

Retro industrial lever that pulls down to engage with a metallic finish.

#gradient #shadow #border

Live preview Toggles

Loot / Shop

Treasure chest knob becomes a shop on the gold track.

#transform #shadow

Live preview Toggles

Mana / Rage

Blue mana knob becomes a red rage symbol on toggle.

#transform #shadow

Live preview Toggles

Manual / Auto

Hand-crank knob shifts to a spinning gear for auto mode.

#animation #transform #shadow

Live preview Toggles

Marquee Bulb

Theater marquee bulbs chase in sequence when lit.

#animation #gradient #transform

Live preview Toggles

Master / Replica

Crown master knob becomes a replica of dots on toggle.

#transform #shadow