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

Coffee Passport

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

#gradient #transform #shadow

Live preview Cards

Discount Coupon

Coupon card with scissors, a dashed cut line, notch cutouts and a big discount percentage.

#gradient #shadow #border

Live preview Cards

Invite Only Card

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

#gradient #transform #shadow

Live preview Checkboxes

3D Pyramid Check

A 3D pyramid that flips and turns gold when checked.

#transform #border #3d

Live preview Checkboxes

Accordion Toggle

An accordion expands in red when checked.

#transform #shadow #filter

Live preview Checkboxes

Amber Fossil Stone

A golden amber stone reveals an ancient inclusion when checked.

#gradient #transform #shadow

Live preview Checkboxes

Apartment Toggle

An apartment building scales in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Avocado Ripe Toggle

An avocado glows green when ripe and checked.

#transform #shadow #filter

Live preview Checkboxes

Bacon Sizzle Toggle

A bacon strip wiggles with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Banjo Toggle

A banjo slides in brown 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 Checkboxes

Espresso Toggle

An espresso pulses brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Hourglass Checkbox

The glass rotates half a turn and the sand settles into the lower bulb.

#clip-path #transform #border

Live preview Checkboxes

Pulsar Radio Beams

Concentric radio waves pulse outward when this star is checked.

#animation #transform #shadow

Live preview Checkboxes

Ripple Burst Check

Toggling on triggers an expanding ripple ring around the checkbox.

#animation #border #transform

Live preview Checkboxes

Scale Pop Checkmark

The checkmark scales up with overshoot then settles, paired with a soft background.

#border #transform #rotate

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

Psi Symbol Toggle

The Greek psi letter slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Tarot Card Reveal

A mystical tarot card flips to reveal its face when checked.

#gradient #transform #border

Live preview Checkboxes

Pickup Truck Toggle

A pickup truck bounces in orange when checked.

#animation #transform #shadow

Live preview Forms

Letter Spacing Floating Label

Label expands its letter spacing as it lifts up.

#transform #border

Live preview Forms

Pill Floating Label

Rounded pill input whose label slides into a small floating chip.

#transform #shadow #border

Live preview Forms

Rotate Floating Label

Label rotates 90 degrees then settles above the input.

#transform #shadow #border

Live preview Forms

Scale Down Floating Label

Label shrinks to the corner with a smooth scale-down motion.

#transform #border

Live preview Forms

Both Icons Input

Input with icons on both left and right sides.

#transform #shadow #border

Live preview Forms

Invalid Icon Input

Input with a red X icon that appears when invalid.

#transform #shadow #border

Live preview Forms

Checkmark Radio

Radio that displays an animated checkmark inside the circle when picked.

#transform #border

Live preview Forms

Flip Radio

Radio card flips in 3D when selected.

#gradient #transform #border

Live preview Forms

Glass Search Bar

Frosted glass search bar with translucent background.

#transform #shadow #border

Live preview Hover

Color Invert Pill

Pill swaps its background and text colors instantly on hover.

#hover #border #transform

Live preview Hover

Inset Bevel Frame

Inset beveled frame creates depth on hover.

#hover #transform #shadow

Live preview Hover

Icon Jump Link

The arrow leaps forward and the label shifts slightly to follow it.

#hover #transform

Live preview Hover

Rotate 3D Flip

Single 3D flip on hover.

#hover #transform #3d

Live preview Hover

Slide Random Reveal

Random-direction slide reveal on hover.

#hover #transform

Live preview Hover

Squash Pancake

Squashes flat as pancake on hover.

#hover #transform

Live preview Hover

Pop Letter

Letters pop up sequentially on hover.

#hover #animation #transform

Live preview Hover

Topspin

Element topspins forward on hover.

#hover #transform #3d

Live preview Hover

Wipe Down

New color wipes down from top on hover.

#hover #transform

Live preview Hover

3D Zoom Tilt

3D zoom tilt transform on hover.

#hover #transform #shadow

Live preview Loaders

Arc Sweep

Arc sweeping around a center point.

#animation #transform #border

Live preview Loaders

Axe Chop

Axe chopping down into a wooden log repeatedly.

#animation #gradient #transform

Live preview Loaders

Baseball Pitch

Baseball stitching spinning as it flies past home plate.

#animation #gradient #transform

Live preview Loaders

Blender Blade

Blender jar with whirring blades at the bottom.

#animation #gradient #transform

Live preview Loaders

Camera Shutter

Camera shutter opening and closing.

#animation #transform

Live preview Loaders

Camshaft

Camshaft with egg-shaped lobes.

#animation #gradient #transform

Live preview Loaders

Candle Clock

Candle burning down as time passes.

#animation #gradient #transform

Live preview Loaders

Candle Flame

Candle flame flickering.

#animation #gradient #transform

Live preview Loaders

Cannon Fire

Cannon with periodic fire burst.

#animation #gradient #transform

Live preview Loaders

Dynamo

Dynamo generating spark.

#animation #gradient #transform

Live preview Loaders

Game Boy

Classic handheld Game Boy with a flickering screen.

#animation #gradient #transform

Live preview Loaders

Helicopter Blade

Helicopter rotor blades spinning above the cockpit.

#animation #gradient #transform

Live preview Loaders

Ice Cream Melt

Ice cream melting down cone.

#animation #gradient #transform

Live preview Loaders

Icicle Drip

Icicle dripping water droplets on a winter day.

#animation #gradient #transform

Live preview Loaders

Loop Roll

Loop shape rolling end over end.

#animation #transform #border

Live preview Loaders

Microwave Turntable

Microwave glass plate rotating with a glowing interior.

#animation #gradient #transform

Live preview Loaders

Morph Blob Loader

A gradient blob melts between organic border-radius shapes while it rotates.

#animation #gradient #transform

Live preview Loaders

Pilgrim Hat

Pilgrim hat with shiny buckle.

#animation #gradient #transform

Live preview Loaders

Spark Fly

Sparks flying upward.

#animation #transform #shadow

Live preview Loaders

Stopwatch Tick

A stopwatch face with a red second hand ticking in 60 discrete steps.

#animation #border #transform

Live preview Loaders

Sun Rays

Sun with rotating rays around a glowing yellow center.

#animation #gradient #transform

Live preview Loaders

Timing Belt

Timing belt moving over gears.

#animation #transform #border

Live preview Loaders

Vinyl Scratch

DJ scratching vinyl record.

#animation #gradient #transform

Live preview Loaders

Welder Spark

Welding torch throwing bright sparks in bursts.

#animation #gradient #transform

Live preview Navigation

3D Arrow Breadcrumbs

Breadcrumbs with 3D arrow separators.

#hover #gradient #transform

Live preview Navigation

Curve Arrow Breadcrumbs

Breadcrumbs with curved arrow separators.

#hover #transform

Live preview Navigation

Line Separator Breadcrumbs

Breadcrumbs with vertical line separators.

#hover #transform

Live preview Navigation

Stack Cards Drawer Navbar

Drawer with stacked card-style links that fan out on hover.

#hover #transform #shadow

Live preview Navigation

Magnetic Pull Navbar

Links magnetically grow toward the hovered item while neighbors shrink back.

#hover #transform #shadow

Live preview Navigation

Neon Edge Navbar

Navbar with neon glowing edges.

#hover #transform #shadow

Live preview Navigation

Dark Fade Overlay Navbar

Side panel nav with a fading dark overlay backdrop.

#hover #animation #gradient

Live preview Navigation

Aurora Gradient Overlay Navbar

Modal nav over an aurora gradient animated background.

#hover #animation #gradient

Live preview Navigation

Light Fade Overlay Navbar

Side panel nav with a fading light translucent backdrop.

#hover #animation #gradient

Live preview Navigation

Active Flip Pagination

Active page flips on Y axis.

#hover #transform #shadow

Live preview Navigation

Pulse Throb Navbar

Active link throbs with a pulsing scale animation.

#hover #animation #transform

Live preview Tabs

Chalk Rounded Tabs

One soft rounded shell with the content above and a chalk thumb sliding below.

#transform #rounded #shadow

Live preview Tabs

Cobalt Stepper Tabs

Numbered cobalt nodes on a rail, with the connecting line filling as you advance.

#transform #gradient #stepper

Live preview Tabs

Nickel Notch Tabs

A small pointer notch slides under the active tab and aims at the panel below.

#transform #border #shadow

Live preview Text

Bounce Horizontal Slide

Bouncing horizontal slide motion.

#animation #transform

Live preview Text

Breathing Text

Text slowly scales and glows in a calm breathing rhythm.

#animation #shadow #transform

Live preview Text

Collage Cutout

Magazine cutout collage ransom-style text.

#transform #border

Live preview Text

Constructivism Bold Red

Constructivist bold red propaganda.

#transform

Live preview Text

Distortion Grit

Gritty distorted guitar text.

#animation #transform #shadow

Live preview Text

Train Steam

Steam train chugging on text.

#animation #transform #shadow

Live preview Tooltips

3D Rotate Y

Tooltip that rotates fully on the Y axis to appear above the trigger.

#hover #transform #border

Live preview Tooltips

Curve Arrow Top

Tooltip with a curved swooping connector above the trigger.

#hover #transform #border

Live preview Tooltips

Calendar Event

Calendar event tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Charcoal Noir

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

#hover #transform #shadow

Live preview Tooltips

Circle Mask

Tooltip reveals with a circle mask opening above the trigger.

#hover #transform #border

Live preview Tooltips

Diamond Grow Clip

Diamond-shaped tooltip that grows from a point above the trigger.

#hover #transform

Popular tags