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

Live preview Toggles

Refresh / Restart

Curved refresh arrow becomes a power restart symbol.

#animation #transform #shadow

Live preview Toggles

Relay / Direct

Relay antenna knob becomes a direct arrow on toggle.

#transform #shadow

Live preview Toggles

Resin Glass

Clear resin glass knob with depth and embedded particles.

#gradient #transform #shadow

Live preview Toggles

Rest / Camp

Sleep knob becomes a campfire tent on toggle.

#transform #shadow

Live preview Toggles

Retro Cartridge

Game cartridge slides into the slot with retro flair.

#gradient #transform #shadow

Live preview Toggles

Riff / Lick

Guitar knob becomes a music note on the purple track.

#transform #shadow

Live preview Toggles

Ripple Pond

Stone drops creating ripples across the still pond surface.

#animation #gradient #transform

Live preview Toggles

Ripple Wave

Concentric ripples emanate from the knob on toggle.

#animation #gradient #transform

Live preview Toggles

Rise / Fall

Vertical toggle where the knob rises upward when activated.

#transform #shadow

Live preview Toggles

River Bend

Winding river curves around the knob on the verdant track.

#gradient #transform

Live preview Toggles

River / Lake

River current knob becomes a still lake on the teal track.

#gradient #transform #shadow

Live preview Toggles

Robot Eye

Robotic eye glows red when armed, calming blue when safe.

#gradient #transform #shadow

Live preview Toggles

Rocket Launch

Rocket ignites and blasts off with a flame trail.

#animation #gradient #transform

Live preview Toggles

Rose Quartz

Rose quartz crystal with pink translucent glow.

#gradient #transform #shadow

Live preview Toggles

Rosewood Grain

Rosewood grain wood with polished knob.

#gradient #transform #shadow

Live preview Toggles

Rotate / Spin

Knob rotates 90 degrees then spins continuously.

#animation #transform #shadow

Live preview Toggles

Rubber Grip

Rubber grip texture with raised non-slip dots.

#gradient #transform #shadow

Live preview Toggles

Ruby / Emerald

Crimson ruby knob transforms into a vivid emerald green.

#gradient #transform #shadow

Live preview Toggles

Ruby Heart

Ruby red heart with deep crimson glow.

#gradient #transform #shadow

Live preview Toggles

Rust Patina

Rust orange patina with verdigris knob.

#gradient #transform #shadow

Live preview Toggles

Rust Texture

Corroded rust texture with orange-brown oxidation spots.

#gradient #transform

Live preview Toggles

Sage Whisper

Muted sage green with subtle whisper tone.

#gradient #transform #shadow

Live preview Toggles

Sail / Perch

Sailboat knob becomes a perched eagle on the sky-blue track.

#transform #shadow

Live preview Toggles

Sand Dune

Desert sand dune shape shifts across the arid track.

#gradient #transform

Live preview Toggles

Sandbox / Prod Env

Sandbox beach knob becomes a prod factory on the teal track.

#transform #shadow

Live preview Toggles

Sandstone Grain

Sandstone with layered sedimentary grain texture.

#gradient #transform

Live preview Toggles

Sapphire Blue

Deep sapphire blue with gem-like inner glow.

#gradient #transform #shadow

Live preview Toggles

Sapphire Deep

Deep sapphire blue with royal intensity.

#gradient #transform #shadow

Live preview Toggles

Sapphire / Topaz

Deep blue sapphire knob warms into a golden topaz glow.

#gradient #transform #shadow

Live preview Toggles

Satellite Dish

Dish tilts to lock onto a satellite signal.

#transform #shadow

Live preview Toggles

Satin Shimmer

Smooth satin fabric shimmers as the knob slides across.

#animation #gradient #transform

Live preview Toggles

Satin / Silk

Satin knob gains a flowing silk gradient on toggle.

#gradient #transform #shadow

Live preview Toggles

Saturate / Fade

Saturated knob fades to grayscale on the violet track.

#gradient #transform #shadow

Live preview Toggles

Save / Load

Floppy save icon switches to a folder load action.

#transform #shadow

Live preview Toggles

Save / Respawn

Save disk knob becomes a respawn heart on toggle.

#transform #shadow

Live preview Toggles

Scan Line

CRT scan line sweeps across the dark monitor track.

#animation #gradient #transform

Live preview Toggles

Seaweed Sway

Underwater seaweed strands sway gently in the current.

#animation #gradient #transform

Live preview Toggles

Secret / Shared

Whisper knob becomes a megaphone when the secret is shared.

#transform #shadow

Live preview Toggles

Secure / Release

Closed lock pops open as the track turns from red to green.

#transform #shadow

Live preview Toggles

Seek / Find

Eye knob opens wide (scaleX) when the target is found.

#transform #shadow

Live preview Toggles

Sepia Vintage Photo

Colorful photo swatch warms to a brown sepia tone and shifts across the track.

#gradient #border #transform

Live preview Toggles

Sequin Sparkle

Sparkly sequins catch the light as the knob slides past.

#animation #gradient #transform

Live preview Toggles

Settings Gear

Settings gear rotates as the toggle activates.

#animation #transform #shadow

Live preview Toggles

Shadow / Flat

Neumorphic shadow knob flattens to 2D.

#transform #shadow

Live preview Toggles

Shake / Still

Shaking knob stops still on the orange track.

#animation #transform #shadow

Live preview Toggles

Shard / Whole

Puzzle shard knob merges into a whole circle on toggle.

#transform #shadow

Live preview Toggles

Shark Fin

Shark fin surfaces above the water as the predator approaches.

#gradient #transform

Live preview Toggles

Sharp / Blunt

Sharp triangular knob rounds out into a blunt circle.

#transform #shadow

Live preview Toggles

Sharp / Natural

Sharp symbol returns to a natural symbol on the cyan track.

#transform #shadow

Live preview Toggles

Shock / Ground

Lightning shock knob grounds into the earth on toggle.

#transform #shadow

Live preview Toggles

Shutter Click

Camera shutter opens and closes with a satisfying click.

#gradient #transform

Live preview Toggles

Shy / Bold

Blushing shy face grows into a smirking bold one.

#transform #shadow

Live preview Toggles

Sign / Verify

Pen sign knob becomes a verified check on the blue track.

#transform #shadow

Live preview Toggles

Signal Bars

Signal strength bars rise from weak to full.

#transform #shadow

Live preview Toggles

Signal / Noise

Clean track fills with static noise texture when toggled to noise.

#gradient #transform #shadow

Live preview Toggles

Silicone Soft

Soft silicone surface with smooth matte finish.

#gradient #transform #shadow

Live preview Toggles

Silk Ripple

Pure silk fabric ripples softly with the knob movement.

#animation #gradient #transform

Live preview Toggles

Silver Moon

Silver moon glow on dark night sky.

#gradient #transform #shadow

Live preview Toggles

Simple / Advanced

Minus becomes a plus to unlock advanced options.

#transform #shadow

Live preview Toggles

Single / Multi

One dot multiplies into a row of dots.

#transform #shadow

Live preview Toggles

Skill / Stat

Skill star knob becomes a stat bar chart on toggle.

#transform #shadow

Live preview Toggles

Slate Quartz

Slate grey quartz with crystalline sheen.

#gradient #transform #shadow

Live preview Toggles

Sleep / Wake

Sleeping face wakes into a smile on the indigo-to-yellow track.

#transform #shadow

Live preview Toggles

Small / Large

Tiny knob grows in size to indicate large scale.

#transform #shadow

Live preview Toggles

Smooth / Rough

Smooth knob gains a rough textured surface on toggle.

#transform #shadow

Live preview Toggles

Snail / Rabbit

Slow snail darts into a quick leaping rabbit.

#transform #shadow

Live preview Toggles

Snare / Kick

Drum knob becomes a kicking shoe on the amber track.

#transform #shadow

Live preview Toggles

Snow / Rain

Snowflake melts into a raindrop as precipitation changes.

#gradient #transform #shadow

Live preview Toggles

Soar / Perch

Soaring eagle knob perches down on the sky track.

#animation #transform #shadow

Live preview Toggles

Solar Flare

Sun erupts with a flare of plasma across its surface.

#gradient #transform #shadow

Live preview Toggles

Solid / Liquid

Solid square knob melts into a liquid blob on toggle.

#transform #shadow

Live preview Toggles

Solo / Chorus

Single dot knob multiplies into a chorus of three on toggle.

#transform #shadow

Live preview Toggles

Spark / Fizzle

Spark knob fizzles out into a fading dot on the amber track.

#transform #shadow

Live preview Toggles

Spear / Lance

Spear knob tilts into a jousting lance on toggle.

#transform #shadow

Live preview Toggles

Spectrum Bloom

Color spectrum blooms from the knob center across the track.

#gradient #transform #shadow

Live preview Toggles

Spin / Stop

Continuously spinning knob halts when toggled on.

#animation #gradient #transform

Live preview Toggles

Spotlight Beam

Stage spotlight follows the knob with a cone of light.

#gradient #transform #shadow

Live preview Toggles

Spring / Autumn Leaf

Track warms from green to orange while a leaf rotates color and direction.

#gradient #shadow #border

Live preview Toggles

Spring Coil

Coiled spring compresses and releases with the toggle.

#gradient #transform

Live preview Toggles

Spring / Summer

Spring blossom gives way to a bright summer sun.

#gradient #transform #shadow

Live preview Toggles

Sprout Grow

Tiny seed sprouts and grows upward through the soil.

#gradient #transform

Live preview Toggles

Square Press Toggle

Square-edged industrial switch that physically depresses when activated.

#gradient #shadow #border

Live preview Toggles

Stage Curtain

Velvet theater curtain rises to reveal the performance.

#gradient #transform

Live preview Toggles

Stage / Prod

Stage theatre knob becomes a factory on the slate track.

#transform #shadow

Live preview Toggles

Stamina / Health

Green stamina knob becomes a red heart on toggle.

#transform #shadow

Live preview Toggles

Stamp Press

Stamp knob presses down leaving an inked impression.

#gradient #transform

Live preview Toggles

Stamp / Seal

Rubber stamp knob becomes a wax seal on the crimson track.

#transform #shadow

Live preview Toggles

Standby / Active

Power symbol knob glows green when the device goes active.

#transform #shadow

Live preview Toggles

Star / Cross

Five-point star morphs into a plus cross shape.

#transform #shadow

Live preview Toggles

Star Rate

Empty star fills gold with a rating pop.

#gradient #transform #shadow

Live preview Toggles

Stars Twinkle

Dark night sky fills with twinkling stars when on.

#animation #transform #shadow

Live preview Toggles

Start / Stop

Knob scales from small stop to large go with red-to-green track shift.

#transform #shadow

Live preview Toggles

Steampunk / Cyber

Gear knob becomes a neon cyber symbol on toggle.

#transform #shadow

Live preview Toggles

Steampunk Valve

Brass steampunk valve wheel cranks open with steam release.

#animation #gradient #transform

Live preview Toggles

Stoneware Clay

Rough stoneware clay with matte speckled surface.

#gradient #transform #shadow