#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

Church Toggle

A church glows softly white when checked.

#transform #shadow #filter

Live preview Buttons

Abalone Shell

Iridescent abalone shell with shifting hues.

#animation #gradient #transform

Live preview Checkboxes

Power On Toggle

A power-symbol checkbox that glows green when powered on, dark when off.

#shadow #border #transform

Live preview Backgrounds

Deep Abyss

Lightless ocean abyss glows faintly with bioluminescent specks.

#animation #gradient #transform

Live preview Cards

Alarm Card

Alarm card with a clock face, set time, and toggle indicator.

#gradient #transform #shadow

Live preview Hover

Orbit Spiral

Spiral inward orbit on hover.

#hover #animation #transform

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

#hover #animation #gradient

Live preview Checkboxes

Laptop Work Toggle

A laptop glows blue when checked.

#transform #shadow #filter

Live preview Hover

3D Tilt Follow

Element tilts in 3D following cursor on hover.

#gradient #transform

Live preview Navigation

Horizontal Bottom Dot Nav

Horizontal dot navigation at bottom.

#hover #transform #shadow

Live preview Tooltips

3D Fold Origami

Tooltip that unfolds in 3D like an origami paper fold.

#hover #transform #border

Live preview Toggles

Active / Inactive

Pulsing green dot signals active vs a still grey one.

#animation #transform #shadow

Live preview Toggles

Frozen / Melted

Frozen ice knob melts into a puddle shape on the cyan track.

#transform #shadow

Live preview Backgrounds

Aurora Curtain

Vertical bands of aurora light ripple like a hanging curtain.

#animation #gradient #transform

Live preview Hover

Quiver Hard

Hard intense quiver on hover.

#hover #animation #transform

Live preview Loaders

Wormhole Tunnel

Traveling through a wormhole tunnel.

#animation #gradient #transform

Live preview Tooltips

3D Cube Spin

Tooltip that spins in 3D like a tumbling cube above the trigger.

#hover #transform #border

Live preview Tooltips

Square Arrow Left

Tooltip with a sharp square-cut arrow pointing right.

#hover #transform

Live preview Toggles

Hot / Cold

Flame turns to a snowflake as the temperature flips.

#gradient #transform #shadow

Live preview Buttons

Blade Slash Button

Sleek button with a diagonal blade slash on hover.

#hover #gradient #transform

Live preview Hover

Aperture Iris Close

A dark circular iris contracts over the panel like a camera aperture closing on hover.

#gradient #hover #border

Live preview Text

Chess Knight

Chess knight piece on text.

#animation #transform #shadow

Live preview Toggles

Arrow / Dots

Solid arrow dissolves into a row of dots.

#transform #shadow

Live preview Toggles

Awake / Tired

Wide-awake eye closes into a sleepy yawn.

#transform #shadow

Live preview Toggles

Bit Flip

Binary bit flips between 0 and 1 in monospace green.

#transform #shadow #border

Live preview Badges

Ripple Badge

Badge with expanding ripple waves.

#animation #transform #border

Live preview Backgrounds

Abalone Nacre

Abalone shell nacre with shifting iridescent colors.

#animation #gradient #transform

Live preview Backgrounds

Cassette Rewind

Cassette reels spin rapidly in reverse as tape rewinds.

#animation #gradient #transform

Live preview Buttons

Ocean Tide

Waves rolling across a blue button face.

#animation #gradient #transform

Live preview Checkboxes

Apartment Toggle

An apartment building scales in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Battery Charge Toggle

A battery glows green when checked.

#animation #transform #shadow

Live preview Checkboxes

Circle Stroke Draw

An SVG circle outline draws itself around a center dot that pops in when checked.

#border #transform #rotate

Live preview Hover

Bounce Elastic

Elastic overshoot bounce on hover.

#hover #transform

Live preview Loaders

Billiards Cue

Pool cue striking ball.

#animation #gradient #transform

Live preview Navigation

Float Rise Navbar

Hovered links gently rise and float with a soft glow underneath.

#hover #gradient #transform

Live preview Tooltips

Curve Arrow Top

Tooltip with a curved swooping connector above the trigger.

#hover #transform #border

Live preview Tooltips

Charcoal Noir

Near-black charcoal tooltip with a film-noir mood.

#hover #transform #shadow

Live preview Tooltips

Message Tail Clip

Chat-bubble tooltip with a clip-path message tail.

#hover #transform

Live preview Badges

Certified Ribbon Badge

Certified badge styled like an official ribbon stamp.

#transform #shadow #border

Live preview Badges

Soft Pulse FX Badge

Animated badge with gentle soft-pulse scale animation.

#animation #gradient #transform

Live preview Badges

Halloween Holiday Badge

Halloween-themed badge with orange and black.

#transform #shadow #border

Live preview Badges

Admin Role Badge

Admin role badge with red shield style.

#transform #shadow #border

Live preview Backgrounds

Cepheid Variable

A cepheid variable star pulses regularly in brightness.

#animation #gradient #transform

Live preview Backgrounds

Shifting Dunes

Golden desert dunes slowly shift and reshape with the wind.

#animation #gradient #transform

Live preview Backgrounds

Annular Solar Eclipse

An annular eclipse shows a bright ring of fire around the moon.

#animation #gradient #transform

Live preview Backgrounds

Fluid Pour

Colorful fluid pours down in a steady thick stream.

#animation #gradient #transform

Live preview Backgrounds

Fractal Tree

Self-similar fractal tree with branching limbs growing recursively.

#animation #gradient #transform

Live preview Backgrounds

Kaleidoscope 6

A 6-fold kaleidoscope of bright symmetric patterns.

#animation #gradient #transform

Live preview Backgrounds

Lissajous Curve

Lissajous curve figure traced by harmonic oscillation.

#animation #gradient #transform

Live preview Backgrounds

Morning Glory

Vivid blue morning glory vines spiral upward opening to the sun.

#animation #gradient #transform

Live preview Backgrounds

Paint Mixing

Thick layers of paint fold and mix together in slow motion.

#animation #gradient #transform

Live preview Backgrounds

Paint Splash

Vivid paint splashes burst and drip across a white canvas.

#animation #gradient #transform

Live preview Backgrounds

Plasma Arc

An electric plasma arc crackles between two points.

#animation #gradient #transform

Live preview Backgrounds

Plasma Torch

A bright blue plasma jet emits a thin column of superheated gas.

#animation #gradient #transform

Live preview Backgrounds

Snow Drift

Snowflakes drift and accumulate into soft curves on the ground.

#animation #gradient #transform

Live preview Backgrounds

Gentle Snowfall

Soft white snowflakes drift down across a winter night sky.

#gradient #animation #border

Live preview Backgrounds

Spacetime Warp

Spacetime itself warps and ripples around an invisible mass.

#animation #gradient #transform

Live preview Backgrounds

Traffic Lights

Traffic lights cycle through red yellow and green.

#animation #gradient #transform

Live preview Backgrounds

Trophy Shine

A golden trophy spins with a sparkle highlight.

#animation #gradient #transform

Live preview Backgrounds

Wetland Marsh

Calm marsh water reflects reeds and a soft overcast sky.

#animation #gradient #transform

Live preview Buttons

Aerospace Panel

Industrial aerospace metal panel with rivets.

#hover #gradient #transform

Live preview Buttons

Almond Cream

Soft almond-cream with brown speckle.

#hover #gradient #transform

Live preview Buttons

Amber Haze

Golden amber button with a hazy outer glow.

#hover #gradient #transform

Live preview Buttons

Andromeda

Andromeda-galaxy button with spiral star arms.

#hover #gradient #transform

Live preview Buttons

Aquamarine Sea

Pale aquamarine sea-gem with clear facets.

#hover #gradient #transform

Live preview Buttons

Arc Welder Button

Industrial button with an electric arc tracing its top edge.

#hover #animation #transform

Live preview Buttons

Dahlia Bloom

Layered dahlia petals in deep magenta.

#hover #gradient #transform

Live preview Buttons

Honeydew Fresh

Pale honeydew melon green button.

#hover #gradient #transform

Live preview Buttons

Magenta Hot Pulse

Vivid magenta button with a throbbing pulse.

#hover #animation #transform

Live preview Buttons

Platinum Edge

Polished platinum button with sharp edge.

#hover #gradient #transform

Live preview Buttons

Trailblazer

Bright orange trailblaze with motion lines.

#animation #gradient #transform

Live preview Cards

Coffee Passport

Coffee passport card with stamp grid, roast notes, and a bean icon.

#gradient #transform #shadow

Live preview Cards

Invite Only Card

Invite-only card with an envelope flap, wax seal, and elegant calligraphy title.

#gradient #transform #shadow

Live preview Cards

Macro Tracker Card

Macronutrient tracker card with protein, carbs, fat split as stacked bars.

#gradient #transform #shadow

Live preview Cards

Molecule Card

Molecule card with formula, bonds, and structure name.

#gradient #transform #shadow

Live preview Cards

Ribbon Award Card

Ribbon award card with a rosette, dangling tails, and a center medallion.

#gradient #transform #shadow

Live preview Cards

Souvenir Magnet Fridge Card

Fridge souvenir magnet card with destination name and magnetic backing.

#gradient #transform #shadow

Live preview Checkboxes

Coin Flip Toggle

A coin spins gold when checked.

#transform #shadow #filter

Live preview Checkboxes

Plum Color Toggle

A color swatch that fills with plum when checked.

#transform #shadow #border

Live preview Checkboxes

Cosmic Ray Beam

A high-energy cosmic ray beam shoots through the box when checked.

#animation #gradient #transform

Live preview Checkboxes

Dragonfly Toggle

A dragonfly slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Espresso Toggle

An espresso pulses brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Falcon Toggle

A falcon shakes brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Fig Toggle

A fig fades in purple when checked.

#transform #shadow #filter

Live preview Checkboxes

Giraffe Tall Toggle

A giraffe brightens with a yellow glow when checked.

#transform #shadow #filter

Live preview Checkboxes

Long Drum Toggle

A long drum shakes in orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Number 1 Toggle

Number 1 scales up blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Plug Power Toggle

A plug glows yellow when checked.

#transform #shadow #filter

Live preview Checkboxes

Plum Toggle

A plum flips purple when checked.

#transform #shadow #filter

Live preview Checkboxes

3D Y-Axis Flip

A 3D flip on the Y axis revealing a checkmark on the back face.

#transform #border #3d

Live preview Checkboxes

Scissors Cut Toggle

Scissors snip with a gray glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Silverfish Toggle

A silverfish spins gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Sparkle Twinkle

A four-pointed sparkle that twinkles in with a magenta glow and slow spin when checked.

#animation #shadow #border

Live preview Checkboxes

Sun Brighten Toggle

A dim sun emoji brightens and slowly rotates with a warm yellow glow when checked.

#animation #shadow #transform

Live preview Checkboxes

Sunset Dusk Toggle

A sunset glows warm when checked.

#transform #shadow #filter

Popular tags