#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 Checkboxes

Psi Symbol Toggle

The Greek psi letter slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Theta Symbol Toggle

The Greek theta letter scales pink when checked.

#transform #shadow #filter

Live preview Checkboxes

Storm Crash Toggle

A thunderstorm shakes yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Pickup Truck Toggle

A pickup truck bounces in orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Willet Toggle

A willet flips gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Yellowjacket Toggle

A yellowjacket spins yellow when checked.

#animation #transform #shadow

Live preview Forms

Floating Label OTP

OTP boxes with floating placeholder text.

#transform #border

Live preview Forms

Bounce Radio

Radio indicator bounces in with springy motion on selection.

#animation #transform #border

Live preview Forms

Icon Background Search

Search bar with icon in a colored background square.

#transform #shadow #border

Live preview Forms

Success State Input

Input showing success state with green border and checkmark icon.

#animation #transform #shadow

Live preview Hover

Color Swap Fast

Foreground and background colors swap on hover.

#hover #transform #border

Live preview Hover

Cyan Shift

Hue rotates to cyan on hover.

#hover #transform #filter

Live preview Hover

Duotone Magenta

Magenta-cyan duotone filter on hover.

#hover #transform #filter

Live preview Hover

Embers Float

Floating embers drift up on hover.

#hover #animation #transform

Live preview Hover

Explode Out

Colored shards burst outward in all directions with scaling and fading on hover.

#gradient #hover #border

Live preview Hover

Fade In Zoom

Zoom fade-in on hover.

#hover #transform

Live preview Hover

Fire Spark

Fire sparks flicker on hover.

#hover #animation #gradient

Live preview Hover

Flip 3D Coin

Coin-toss flip on hover.

#hover #animation #gradient

Live preview Hover

Glow Beam Vertical

Vertical light beam sweeps on hover.

#hover #gradient #transform

Live preview Hover

Jelly Wobble

Element wobbles like jelly on hover.

#hover #animation #transform

Live preview Hover

Stripes Diagonal Mask

Diagonal stripes sweep across on hover.

#hover #gradient #transform

Live preview Hover

Stripes Vertical Mask

Vertical stripes cascade down on hover.

#hover #gradient #transform

Live preview Hover

Rainbow Arcs

Rainbow arcs shimmer on hover.

#hover #animation #gradient

Live preview Hover

Mega Shake

Violent mega shake on hover.

#hover #animation #transform

Live preview Hover

Squash Pancake

Squashes flat as pancake on hover.

#hover #transform

Live preview Hover

Horizontal Wobble

Horizontal wobble motion on hover.

#hover #animation #transform

Live preview Loaders

Asteroid Belt

Asteroids orbiting in a belt formation.

#animation #gradient #transform

Live preview Loaders

Banjo Strum

Banjo strings being strummed.

#animation #gradient #transform

Live preview Loaders

Boxing Glove

Boxing glove jabbing back and forth like a punching bag.

#animation #gradient #transform

Live preview Loaders

Brownie Bite

Brownie with bite marks.

#animation #gradient #transform

Live preview Loaders

Brushless Motor

Brushless motor with smooth rotation.

#animation #transform

Live preview Loaders

Cannon Fire

Cannon with periodic fire burst.

#animation #gradient #transform

Live preview Loaders

Chess Knight

Chess knight piece moving.

#animation #gradient #transform

Live preview Loaders

Dart Throw Flight

Dart flying toward board.

#animation #gradient #transform

Live preview Loaders

Flute

Flute with finger keys pressing in a melody pattern.

#animation #gradient #transform

Live preview Loaders

Game Boy

Classic handheld Game Boy with a flickering screen.

#animation #gradient #transform

Live preview Loaders

Ice Cube Melt

Ice cube slowly melting into a puddle of water.

#animation #gradient #transform

Live preview Loaders

Joker Grin

Joker card with shifting grin.

#animation #gradient #transform

Live preview Loaders

Mandala Spin

Symmetric mandala pattern spinning.

#animation #transform

Live preview Loaders

Merry-Go-Round

Rotating platform with three colored horses spinning around.

#animation #gradient #transform

Live preview Loaders

Pearl Glow

Pearl with soft iridescent glow.

#animation #gradient #transform

Live preview Loaders

Pentagon Flower Spin

Five-petal flower spinning.

#animation #transform

Live preview Loaders

Pole Vault

Pole vaulter going over bar.

#animation #gradient #transform

Live preview Loaders

Rolling Pin

Rolling pin spinning back and forth over dough.

#animation #gradient #transform

Live preview Loaders

Santa Sleigh Fly

Santa's sleigh flying across.

#animation #gradient #transform

Live preview Loaders

Satellite Dish

Satellite dish emitting signal waves.

#animation #gradient #transform

Live preview Loaders

Saxophone

Saxophone with keys pressing along its curved body.

#animation #gradient #transform

Live preview Loaders

Sextant

Sextant arc with swinging arm.

#animation #transform #border

Live preview Loaders

Spark Fly

Sparks flying upward.

#animation #transform #shadow

Live preview Loaders

Stepper Motor

Stepper motor stepping in increments.

#animation #gradient #transform

Live preview Loaders

Tomato Slice

Tomato slice with seed pattern.

#animation #gradient #transform

Live preview Navigation

Circle Hamburger

Hamburger inside a circle that morphs on hover.

#hover #transform #border

Live preview Navigation

Flip Hamburger

Hamburger that flips on Y axis.

#hover #transform #border

Live preview Navigation

Zigzag Trail Breadcrumbs

Breadcrumbs with zigzag pattern separators.

#hover #transform

Live preview Navigation

3D Icon Nav

3D extruded icon navigation.

#hover #gradient #transform

Live preview Navigation

Step Bar Fill Nav

Horizontal stepper where each segment fills a progress bar on hover.

#hover #gradient #transform

Live preview Navigation

Underline Segmented Control

Segmented control with an underline indicator that slides between items.

#hover #transform #border

Live preview Navigation

Stamp Ink Press Nav

Active link stamps down with an inked impression effect.

#hover #transform #shadow

Live preview Navigation

Flip Card Tabs

Tabs that flip like cards revealing back face.

#hover #gradient #transform

Live preview Navigation

Pill Bounce Tabs

Pill tabs that bounce into place on active.

#hover #transform #shadow

Live preview Text

Ballet Grace

Graceful ballet pink on text.

#animation #gradient #transform

Live preview Text

Daffodil Trumpet

Yellow daffodil trumpet cup on text.

#animation #gradient #transform

Live preview Text

Music Note Bounce

Bouncing musical notes over text.

#animation #transform #shadow

Live preview Text

Rhythm Pulse

Steady rhythm pulse on text.

#animation #transform #shadow

Live preview Text

Rotate Spin

Text rotating 360 degrees continuously.

#animation #transform

Live preview Text

Rotate Y Yaw

Y-axis yaw rotation animation.

#animation #transform

Live preview Text

Shake Vertical Rattle

Vertical rattle shake motion.

#animation #transform

Live preview Text

Strawberry Red

Sweet red strawberry on text.

#animation #gradient #transform

Live preview Text

Treble Tinkle

High treble tinkle on text.

#animation #transform #shadow

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

#hover #gradient #transform

Live preview Tooltips

Glass Iridescent

Iridescent glass tooltip with a rainbow shimmer overlay.

#hover #gradient #transform

Live preview Tooltips

Green Success

Green success tooltip with checkmark styling above the trigger.

#hover #transform #shadow

Live preview Tooltips

Groove Border Top

Tooltip with a 3D grooved border above the trigger.

#hover #transform #border

Live preview Tooltips

Icon Help

Tooltip with question mark icon above the trigger.

#hover #transform #border

Live preview Tooltips

Light Top

Clean light tooltip with subtle shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Liquid Ripple

Tooltip that ripples outward like a water drop impact.

#hover #transform #border

Live preview Tooltips

Mojito Mint

Fresh mojito mint tooltip with lime accent above the trigger.

#hover #gradient #transform

Live preview Tooltips

Mono Dark

Monospace dark tooltip with terminal feel above the trigger.

#hover #transform #border

Live preview Tooltips

Pulse Throb

Tooltip that throbs with a gentle pulse animation on hover.

#hover #animation #transform

Live preview Tooltips

Rotate Left

Tooltip rotates in from the left with a spin animation.

#hover #transform #border

Live preview Tooltips

Shimmer Wave

Tooltip with a shimmering wave gradient sweeping across.

#hover #animation #gradient

Live preview Tooltips

Status Away

Away status tooltip with yellow dot above the trigger.

#hover #transform #shadow

Live preview Tooltips

Status Online

Online status tooltip with green dot above the trigger.

#hover #transform #shadow

Live preview Tooltips

Time Stamp

Timestamp tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Zig Zag

Tooltip that zigzags into view above the trigger.

#hover #animation #transform

Live preview Toggles

Burlap Rough

Rough burlap surface with rustic coarse fibers.

#gradient #transform

Live preview Toggles

Butterfly / Cocoon

Cocoon bursts open into a fluttering butterfly.

#animation #gradient #transform

Live preview Toggles

Copper / Silver

Warm copper knob cools into a bright silver finish.

#gradient #transform #shadow

Live preview Toggles

Cyan Wave

Cyan wave pattern with aqua glow knob.

#gradient #transform #shadow

Live preview Toggles

Dense / Sparse

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

#gradient #transform #shadow

Live preview Toggles

Download / Upload

Down arrow flips to an up arrow for transfer direction.

#transform #shadow

Live preview Toggles

Solar Eclipse

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

#gradient #transform #shadow

Live preview Toggles

Enter / Exit

Door-enter arrow reverses to an exit sign.

#transform #shadow

Live preview Toggles

Flap / Still

Flapping wing knob goes still on the amber track.

#animation #transform #shadow

Live preview Toggles

Iris Shutter

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

#gradient #transform

Popular tags