Most Popular CSS Effects (Page 19)

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

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

Popup / Toast

Modal popup collapses into a slim toast banner.

#transform #shadow

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 Accordions

Amber Edge Accordion

A resin coloured rail down the left edge stretches to full height when open.

#checkbox #transform #max-height

Live preview Accordions

Anvil History Accordion

Activity is grouped by day and each group tightens its letter spacing as it lands.

#details #history #letter-spacing

Live preview Accordions

Arc Vapor Accordion

A sunset gradient with a receding neon grid running under the glowing rows.

#radio #vaporwave #gradient

Live preview Accordions

Aurora Stagger Accordion

Body lines lift into view one after another on a staggered delay ladder.

#details #stagger #animation

Live preview Accordions

Basalt Console Accordion

A terminal window where each command line folds its own output away.

#details #monospace #animation

Live preview Accordions

Bearing Help Accordion

A help centre where focusing the search box reveals a hint above the topic folds.

#details #focus-within #search

Live preview Accordions

Bloom Mono Accordion

Pure black and white rows invert completely the moment a section opens.

#checkbox #monochrome #contrast

Live preview Accordions

Brass Ledger Accordion

Numbered ledger rows where the brass index chip fills as the note unrolls.

#checkbox #max-height #transition

Live preview Accordions

Caliper Guide Accordion

Step numbers come from a CSS counter, so no digit is written into the markup.

#details #counter #steps

Live preview Accordions

Canyon Tree Accordion

A file tree feel where nested folders indent behind their own guide lines.

#details #nested #monospace

Live preview Accordions

Cascade Pill Accordion

Fully rounded pill rows relax into soft rectangles as their body appears.

#checkbox #border-radius #transition

Live preview Accordions

Chalk Dual Line Accordion

Two line headers pair a title with a quiet subtitle and a folding caret.

#checkbox #typography #transform

Live preview Accordions

Chassis Notify Accordion

Every channel folds out a segmented control that sets how often it may reach you.

#details #radio #segmented

Live preview Accordions

Circuit Toggles Accordion

A settings panel whose groups unfold into rows that each carry a working switch.

#checkbox #settings #grid

Live preview Accordions

Cobalt Fill Accordion

The open header floods with cobalt blue swept in from the left hand edge.

#radio #transform #gradient

Live preview Accordions

Coil Carton Accordion

Kraft cardboard panels with a fluted edge and a tape strip that stretches open.

#checkbox #cardboard #texture

Live preview Accordions

Conduit Privacy Accordion

Privacy rows pair an explanation fold with a switch, and the required one stays locked.

#checkbox #privacy #disabled

Live preview Accordions

Copper Rule Accordion

No shadows at all: a hairline rule draws itself in copper when a row opens.

#checkbox #minimal #transform

Live preview Accordions

Coral Wave Accordion

An open row keeps a slow coloured wave drifting along its underline strip.

#checkbox #animation #gradient

Live preview Accordions

Cove Swap Accordion

The trailing action word slides out and its opposite slides in on toggle.

#checkbox #label-swap #transform

Live preview Accordions

Cusp Zip Accordion

A zipper runs under the header and its pull travels across as the pocket opens.

#checkbox #zipper #transform

Live preview Accordions

Dash Sketch Accordion

Dashed pencil boxes sit slightly askew and wobble a little when opened.

#details #sketch #dashed

Live preview Accordions

Delta Split Accordion

Two independent columns of foldable rows sit side by side in one grid.

#details #grid #two-column

Live preview Accordions

Dune Right Accordion

Everything is anchored to the right edge and the marker turns from there.

#details #right-aligned #transform

Live preview Accordions

Dynamo Keys Accordion

Shortcut groups list their key caps while a small dynamo wheel keeps turning.

#checkbox #keyboard #conic-gradient

Live preview Accordions

Ember Stack Accordion

Cards overlap like a fanned deck until the chosen one steps out of the pile.

#checkbox #stack #transform

Live preview Accordions

Fjord Slide Accordion

Panels open sideways: the body widens from the left header out to the right.

#checkbox #horizontal #max-width

Live preview Accordions

Flange Glossary Accordion

Letter groups sweep a tinted wash across the header while the term list unrolls.

#checkbox #glossary #background-size

Live preview Accordions

Flint Triangle Accordion

A clipped triangle marker pivots downward when its section takes the focus.

#radio #clip-path #transform

Browse by category

Popular tags