#transform CSS effects

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

Live preview Toggles

Clamp Squeeze

Industrial clamp squeezes shut when activated.

#gradient #transform

Live preview Toggles

Class / Spec

Class symbol knob becomes a spec crosshair on toggle.

#transform #shadow

Live preview Toggles

Clay / Bronze

Earthy clay knob polishes into a bronze sheen on toggle.

#gradient #transform #shadow

Live preview Toggles

Clear / Frosted

Clear knob frosts over with a translucent blur effect.

#transform #shadow #filter

Live preview Toggles

Clear / Static

Antenna knob picks up static dots scattered across the track.

#gradient #transform #shadow

Live preview Toggles

Climb / Drop

Chevron knob rotates 180° to flip from climb-up to drop-down.

#transform #shadow

Live preview Toggles

Clock Tick

Clock hands tick between twelve and six positions.

#transform #shadow

Live preview Toggles

Clone / Fork

DNA clone knob becomes a fork symbol on the violet track.

#transform #shadow

Live preview Toggles

Cloud / Local

Cloud knob becomes a local computer on the sky track.

#transform #shadow

Live preview Toggles

Cloudy / Clear

Cloud drifts away to reveal a clear sunny sky.

#gradient #transform #shadow

Live preview Toggles

Cluster / Single

Cluster of dots collapses into a single node on toggle.

#transform #shadow

Live preview Toggles

Co-op / Versus

Cooperative dots become a versus symbol on toggle.

#transform #shadow

Live preview Toggles

Cobalt Streak

Cobalt blue streak with lightning glow.

#animation #gradient #transform

Live preview Toggles

Coffee / Tea

Steaming coffee cup becomes a serene tea cup.

#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

Coins / Gems

Gold coin stash converts to sparkling gems.

#gradient #transform #shadow

Live preview Toggles

Comet Shoot

Distant star streaks across as a comet.

#gradient #transform #shadow

Live preview Toggles

Comet Streak

Bright comet streaks across the cosmic track leaving a tail.

#gradient #transform #shadow

Live preview Toggles

Comet Tail

Comet with trailing tail glides across the cosmic track.

#gradient #transform #shadow

Live preview Toggles

Commit / Revert

Commit check knob becomes a revert arrow on the slate track.

#transform #shadow

Live preview Toggles

Compact / Spacious

Tight knob expands to a wider spacious layout.

#transform #shadow

Live preview Toggles

Confident / Nervous

Cool shades vs a sweat-dropped nervous face.

#animation #transform #shadow

Live preview Toggles

Connect / Disconnect

Link knob snaps apart when disconnected on the blue track.

#transform #shadow

Live preview Toggles

Connected / Disconnected

Chain links join together or break apart.

#transform #shadow

Live preview Toggles

Conveyor Belt

Conveyor belt rolls packages across when active.

#animation #gradient #transform

Live preview Toggles

Copper Penny

Copper penny metal with warm penny knob.

#gradient #transform #shadow

Live preview Toggles

Copy / Paste

Copy sheets turn into a clipboard paste.

#transform #shadow

Live preview Toggles

Coral Bay

Coral bay waters with tropical knob.

#gradient #transform #shadow

Live preview Toggles

Coral Blossom

Coral blossom pink with blooming gradient.

#gradient #transform #shadow

Live preview Toggles

Coral Pearl

Coral pink with pearlescent shimmer knob.

#gradient #transform #shadow

Live preview Toggles

Coral Pink

Soft coral pink with a glossy pearl knob.

#gradient #transform #shadow

Live preview Toggles

Coral Reef

Vibrant coral reef knob brings colorful reef life.

#gradient #transform #shadow

Live preview Toggles

Coral Reef Bloom

Vibrant coral reef with multi-color bloom.

#gradient #transform #shadow

Live preview Toggles

Coral Sunset

Warm coral to sunset orange fade toggle.

#gradient #transform #shadow

Live preview Toggles

Cover / Expose

A cover panel slides upward to expose the knob on activation.

#transform #shadow

Live preview Toggles

CPU Load Meter

Animated bars visualize CPU load rising as the toggle activates.

#gradient #transform #shadow

Live preview Toggles

Cram / Free

Squeezed knob expands to full width when freed from the tight track.

#transform #shadow

Live preview Toggles

Cream Vanilla

Vanilla cream soft with buttery knob.

#gradient #transform #shadow

Live preview Toggles

Crescendo / Decrescendo

Knob grows then shrinks in a breathing crescendo animation.

#animation #transform #shadow

Live preview Toggles

Crescent Moon

Full moon morphs into a crescent against the night sky.

#gradient #transform #shadow

Live preview Toggles

Crimson Flame

Burning crimson flame with flickering glow.

#gradient #transform #shadow

Live preview Toggles

Crochet Loop

Hand-crocheted loop pattern with cozy yarn texture.

#gradient #transform

Live preview Toggles

Crossbow / Slingshot

Crossbow knob becomes a slingshot on the brown track.

#transform #shadow

Live preview Toggles

Crown / Scepter

Crown knob becomes a scepter on the royal gold track.

#transform #shadow

Live preview Toggles

CRT Screen

Vintage CRT screen flickers on with phosphor glow.

#animation #gradient #transform

Live preview Toggles

Crystal Shard

Sharp crystal shard with faceted edge.

#gradient #transform #shadow

Live preview Toggles

Crystalline / Amorphous

Crystal-faceted knob morphs into a blobby amorphous shape.

#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

Cube / Sphere

Square cube knob rounds into a glossy sphere.

#gradient #transform #shadow

Live preview Toggles

Cup / Glass

Short cup stretches into a tall wine glass.

#transform #shadow

Live preview Toggles

Current / Eddy

Flowing current knob swirls into an eddy on toggle.

#gradient #transform #shadow

Live preview Toggles

Cursor Blink

Carets blink on/off to show editability.

#animation #transform #shadow

Live preview Toggles

Cut / Merge

Scissors cut turns into linked-chain merge.

#transform #shadow

Live preview Toggles

Dagger / Saber

Dagger knob becomes a curved saber on the crimson track.

#transform #shadow

Live preview Toggles

Data Stream

Matrix-style data bits cascade behind the sliding knob.

#animation #gradient #transform

Live preview Toggles

Dawn / Dusk

Horizon glows pink at dawn and purple at dusk.

#gradient #transform #shadow

Live preview Toggles

Day / Night Morph

Sky transitions from day to night with a sun morphing into a moon and stars.

#gradient #shadow #border

Live preview Toggles

Debug / Release

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

#transform #shadow

Live preview Toggles

Deepen / Shallow

Knob deepens vertically then goes shallow on toggle.

#transform #shadow

Live preview Toggles

Denim Wear

Worn denim texture with stitching detail across the track.

#gradient #transform #shadow

Live preview Toggles

Deploy / Rollback

Rocket deploy knob becomes a rollback arrow on the indigo track.

#transform #shadow

Live preview Toggles

Design / Code

Palette swaps to code brackets for developer mode.

#transform #shadow

Live preview Toggles

Dev / Live

Dev laptop knob becomes a live globe on the blue track.

#transform #shadow

Live preview Toggles

Dew Drop

Morning dew drop hangs from the leaf and falls when disturbed.

#gradient #transform #shadow

Live preview Toggles

Tuning Dial

Radio tuning dial rotates with frequency marks as it slides.

#gradient #transform #shadow

Live preview Toggles

Diamond / Oval

Diamond knob stretches into a horizontal oval.

#transform #shadow

Live preview Toggles

Diamond Shine

Faceted diamond knob sparkles with brilliant reflections.

#animation #gradient #transform

Live preview Toggles

Digital / Analog

Pixel knob becomes an analog needle on the cyan track.

#gradient #transform #shadow

Live preview Toggles

Discover / Return

Magnifier knob scans left-to-right with a teal track backdrop.

#transform #shadow

Live preview Toggles

Disguise / True

Disguise mustache knob reveals a true face on toggle.

#transform #shadow

Live preview Toggles

Dissolve / Crystallize

Knob dissolves into blur then crystallizes into facets.

#transform #shadow #filter

Live preview Toggles

Distort / Clean

Hue-rotate and contrast filter distort the knob visuals.

#gradient #transform #shadow

Live preview Toggles

Dive / Surface

Diver knob surfaces to an island on the cyan track.

#transform #shadow

Live preview Toggles

DNA Helix

Double helix unzips and rezips into a strand.

#animation #transform #shadow

Live preview Toggles

Dock / Launch

Ship knob gives way to a wave as the navy track brightens.

#transform #shadow

Live preview Toggles

Dolphin Leap

Dolphin arcs over the surface in a joyful leap.

#gradient #transform

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

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

Drift / Anchor

Wave emoji swaps to an anchor when the knob settles on the right.

#gradient #transform #shadow

Live preview Toggles

Droplet Fall

Teardrop-shaped knob rotates as it slides across a watery track.

#gradient #transform

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

Echo / Silent

Echo knob fades into silence with trailing ghost copies.

#transform #shadow

Live preview Toggles

Eclipse Ring

Moon eclipses the sun with a glowing corona ring.

#gradient #transform #shadow

Live preview Toggles

Edge / Core

Edge square knob becomes a core circle on the violet track.

#transform #shadow

Live preview Toggles

Edit / Preview

Pencil switches to an eye when entering preview mode.

#transform #shadow

Live preview Toggles

Elongate / Shorten

Knob elongates horizontally then shortens on toggle.

#transform #shadow

Live preview Toggles

Ember Fade

Glowing ember slowly dims to ash as the toggle turns off.

#gradient #transform #shadow

Live preview Toggles

Ember Glow

Smoldering ember knob pulses with a warm orange glow.

#animation #gradient #transform

Live preview Toggles

Emerald Pool

Emerald pool water with deep reflective knob.

#gradient #transform #shadow

Live preview Toggles

Emerald Spark

Emerald green track with sparkly facet knob.

#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

Enabled / Disabled

Checkmark switches to a cross when disabled.

#transform #shadow

Popular tags