#transform CSS effects

5,986 free, pure-CSS effects match the "transform" tag. Each is copy-ready and needs no library or build step.

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

Silk Ripple

Pure silk fabric ripples softly with the knob movement.

#animation #gradient #transform

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

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

Tide Pool

Tranquil tide pool ripples with marine life colors.

#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

Turquoise Tide

Turquoise tide with rippling wave knob.

#gradient #transform #shadow

Live preview Toggles

UFO Abduct

UFO descends with a tractor beam to abduct.

#gradient #transform #shadow

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

WiFi On / Off

Three concentric WiFi arcs fade when the connection is disabled.

#border #transform #dots

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

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

Chalk Dual Line Accordion

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

#checkbox #typography #transform

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

Copper Rule Accordion

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

#checkbox #minimal #transform

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

Dune Right Accordion

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

#details #right-aligned #transform

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

Flint Triangle Accordion

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

#radio #clip-path #transform

Live preview Accordions

Frost Panel Accordion

Frosted glass panels whose chevron flips and whose text thaws in from a blur.

#details #transform #filter

Live preview Accordions

Girder Team Accordion

Crew groups slide their members in from the left beside a drawn truss marker.

#checkbox #team #transform

Live preview Accordions

Halo Curtain Accordion

Two velvet curtains part sideways to uncover the text behind each header.

#checkbox #curtain #transform

Live preview Accordions

Kiln Assets Accordion

One batch opens at a time and each file draws a bar sized to how heavy it is.

#radio #files #transform

Live preview Accordions

Kindle Envelope Accordion

The flap lifts on its hinge and the letter slides up out of the envelope.

#checkbox #envelope #perspective

Live preview Accordions

Lever Commands Accordion

A command cheat sheet whose lever arm tilts over as the monospace rows appear.

#checkbox #monospace #transform

Live preview Accordions

Lull Map Accordion

A paper map spreads out of its creases and the fold shading fades as it opens.

#checkbox #map #transform

Live preview Accordions

Mesa Contact Accordion

A short question list closed off by a footer that offers a contact link.

#details #faq #footer

Live preview Accordions

Nickel Switch Accordion

Every header carries a small metal switch that slides over as the row opens.

#checkbox #toggle #transform

Live preview Accordions

Obsidian Arrow Accordion

The arrow head slides forward and turns a quarter turn while the text swipes in.

#details #arrow #transform

Live preview Accordions

Onyx FAQ Accordion

A quiet FAQ list whose plus sign rotates into a minus as the answer drops.

#checkbox #faq #transform

Live preview Accordions

Prairie Key Accordion

Keyboard shortcut badges sit in the header and press down while open.

#checkbox #keyboard #badge

Live preview Accordions

Quartz Clip Accordion

The panel is wiped open from the left edge with an animated clip path.

#clip-path #checkbox #transform

Live preview Accordions

Socket Permissions Accordion

Permission rows squash open from the top edge to explain why access is requested.

#checkbox #permissions #transform

Live preview Accordions

Spiral Fan Accordion

Blades sweep out from one pivot like a paper fan while the note appears.

#checkbox #fan #transform

Live preview Accordions

Valley Zebra Accordion

Alternating row tints keep a dense list readable while sections expand.

#checkbox #zebra #max-height

Live preview Accordions

Valve Logs Accordion

Log levels collapse into groups and the valve wheel turns a quarter when opened.

#checkbox #logs #monospace

Live preview Accordions

Wisp Cabinet Accordion

Filing cabinet drawers slide toward you and throw a shadow while they stay out.

#checkbox #drawer #transform

Live preview Avatars

Nickel Flip Card Avatar

The avatar flips on its vertical axis to reveal the member role on the back.

#flip #transform #hover

Live preview Badges

Epic Badge

Epic achievement badge with purple gradient.

#gradient #transform #shadow

Live preview Badges

Honor Badge

Badge of honor with deep purple and gold trim.

#transform #shadow #border

Live preview Badges

Legendary Badge

Legendary achievement badge with rainbow shimmer.

#animation #gradient #transform

Live preview Badges

Mastery Badge

Mastery achievement badge with elite styling.

#transform #shadow #border

Live preview Badges

Rare Badge

Rare achievement badge with blue gradient.

#gradient #transform #shadow

Live preview Badges

Critical Alert Badge

Critical alert badge with pulsing red animation.

#animation #transform #shadow

Live preview Badges

Danger Alert Badge

Critical danger alert badge with strong red.

#transform #shadow #border

Live preview Badges

Live Indicator Badge

Live broadcast indicator badge with red pulse.

#animation #transform

Live preview Badges

Bounce In Badge

Badge that bounces in on render.

#animation #transform

Live preview Badges

Bounce Loop Badge

Badge that bounces continuously.

#animation #transform

Live preview Badges

Breathing Badge

Badge that gently breathes with subtle scale.

#animation #transform

Live preview Badges

Fire Badge

Badge with hot flickering fire effect.

#animation #gradient #transform

Live preview Badges

3D Flip Badge

Badge that flips in 3D continuously.

#animation #transform

Live preview Badges

Float Badge

Badge that gently floats up and down.

#animation #transform

Live preview Badges

Gleam Badge

Badge with subtle gleam reflection.

#animation #gradient #transform

Live preview Badges

Glitch Badge

Badge with cyberpunk glitch effect.

#animation #transform #shadow

Live preview Badges

Jello Badge

Badge with jello-like wobble animation.

#animation #transform

Effects tagged #transform

Popular tags