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

Square Switch

Square track switch with sharp corners and minimal aesthetic.

#transform #border

Live preview Forms

Stacked Switches

Vertically stacked switches for a settings list.

#hover #transform #border

Live preview Forms

Status Switch

Toggle with color-coded status indicator dot.

#transform #shadow

Live preview Forms

Text Reveal Switch

Switch with YES/NO text that swaps when toggled.

#transform

Live preview Forms

Tiny Switch

Compact micro toggle for inline use in dense UIs.

#transform

Live preview Forms

Vertical Switch

Vertical orientation switch with knob sliding up/down.

#transform

Live preview Forms

3D Pressable Input

3D input that appears to depress when focused.

#gradient #transform #shadow

Live preview Forms

Brutalist Hard Edge Input

Brutalist design with hard borders, monospace and offset shadow.

#transform #shadow #border

Live preview Forms

Elevated Card Input

Input wrapped in an elevated card that lifts higher on focus.

#transform #shadow #border

Live preview Forms

Minimal Underline Input

Ultra minimal input with only a bottom underline that grows on focus.

#transform #border

Live preview Forms

Valid Bounce Input

Input bounces once when content becomes valid.

#animation #transform #shadow

Live preview Forms

Valid Check Mark Input

Input that shows a green checkmark when valid.

#transform #shadow #border

Live preview Forms

Animated Check Mark Input

Checkmark draws itself in SVG-style when valid.

#animation #transform #shadow

Live preview Forms

Valid Icon Input

Input with a checkmark icon that appears when valid.

#transform #shadow #border

Live preview Forms

Valid Icon Pop Input

Green icon pops in with elastic bounce when valid.

#animation #transform #shadow

Live preview Forms

Valid Message Input

Input that shows a green success message below when valid.

#transform #shadow #border

Live preview Forms

Success State Input

Input with full success state — green border, check, and label color.

#transform #shadow #border

Live preview Forms

Valid Underline Input

Bottom underline grows in green when valid.

#transform #border

Live preview Hover

3D Page Turn

Page-turn 3D effect on hover.

#hover #transform #3d

Live preview Hover

3D Zoom Flip

3D combined zoom and flip on hover.

#hover #transform #3d

Live preview Hover

3D Zoom Tilt Pop

3D pop with tilt and zoom on hover.

#hover #transform #3d

Live preview Hover

Afterimage Trail

Multiple ghost copies trail behind the label as it slides on hover.

#hover #transform #filter

Live preview Hover

Arrow Nudge

Link text with an arrow icon that nudges to the right on hover.

#hover #transform

Live preview Hover

Backspin

Element backspins on hover.

#hover #transform #3d

Live preview Hover

Barn Door Close

Two-panel barn door closes on hover.

#hover #transform

Live preview Hover

Barn Door Horizontal

Horizontal barn doors open on hover.

#hover #transform

Live preview Hover

Barn Door Open

Two panels split apart like barn doors on hover.

#hover #transform

Live preview Hover

Barn Door Vertical

Vertical barn doors open on hover.

#hover #transform

Live preview Hover

Beam Sweep

Vertical light beam sweeps across on hover.

#hover #gradient #transform

Live preview Hover

Beat Heart

Heartbeat double-thump on hover.

#hover #animation #transform

Live preview Hover

BG Gradient Rotate

Background gradient rotates on hover.

#hover #animation #gradient

Live preview Hover

BG Noise Shimmer

Noise texture shimmers on hover.

#hover #animation #gradient

Live preview Hover

BG Scan Line

Scan line passes over background on hover.

#hover #animation #gradient

Live preview Hover

BG Shimmer

Shimmer sweeps across background on hover.

#hover #gradient #transform

Live preview Hover

BG Water Ripple

Water-like ripple on hover.

#hover #animation #gradient

Live preview Hover

Blinds Open

Vertical blinds open on hover.

#hover #transform

Live preview Hover

Blue Shift

Hue rotates to blue on hover.

#hover #transform #filter

Live preview Hover

Bob Buoy

Buoy bobbing on water on hover.

#hover #animation #transform

Live preview Hover

Bob Float

Element bobs up and down on hover.

#hover #animation #transform

Live preview Hover

Boing Up

Boing-like spring upward on hover.

#hover #animation #transform

Live preview Hover

Border Conic Spin

Conic gradient border spins on hover.

#hover #animation #gradient

Live preview Hover

Border Expand Out

Border outline expands outward on hover.

#hover #transform #border

Live preview Hover

Bounce Diagonal

Bounces diagonally on hover.

#hover #animation #transform

Live preview Hover

Bounce Down

Element bounces downward on hover.

#hover #animation #transform

Live preview Hover

Bounce Jelly

Wobbly jelly bounce on hover.

#hover #animation #transform

Live preview Hover

Bounce Left

Element bounces to the left on hover.

#hover #animation #transform

Live preview Hover

Bounce Random

Erratic random bounces on hover.

#hover #animation #transform

Live preview Hover

Bounce Right

Element bounces to the right on hover.

#hover #animation #transform

Live preview Hover

Bounce Rubber

Rubbery stretch bounce on hover.

#hover #transform

Live preview Hover

Bounce Spring

Spring-loaded bounce on hover.

#hover #animation #transform

Live preview Hover

Bounce Up

Element bounces upward in a spring motion on hover.

#hover #animation #transform

Live preview Hover

Bow Down

Element bows down on hover.

#hover #transform

Live preview Hover

Deep Breathe

Deep breathing scale on hover.

#hover #animation #transform

Live preview Hover

Breathe Scale

Element breathes in and out on hover.

#hover #animation #transform

Live preview Hover

Soft Breathe

Soft breathing animation on hover.

#hover #animation #transform

Live preview Hover

Bubbles Float

Floating bubbles rise on hover.

#hover #animation #gradient

Live preview Hover

Bubbles Rise

Bubbles rise upward on hover.

#hover #animation #gradient

Live preview Hover

Bulge Bubble

Bulges into a bubble on hover.

#hover #transform

Live preview Hover

Bulge Center

Element bulges outward in center on hover.

#hover #transform

Live preview Hover

Bungee Drop

Bungee-cord drop animation on hover.

#hover #animation #transform

Live preview Hover

Cartwheel Left

Element cartwheels to the left on hover.

#hover #transform

Live preview Hover

Cartwheel Right

Element cartwheels to the right on hover.

#hover #transform

Live preview Hover

Hue Cycle Fast

Rapidly cycles through hue rotation on hover.

#hover #animation #transform

Live preview Hover

Hue Cycle Medium

Medium speed hue rotation cycle on hover.

#hover #animation #transform

Live preview Hover

Hue Cycle Slow

Slow hypnotic hue rotation cycle on hover.

#hover #animation #transform

Live preview Hover

Color Invert Pill

Pill swaps its background and text colors instantly on hover.

#hover #border #transform

Live preview Hover

Monochrome Shift

Element shifts to monochrome on hover.

#hover #transform #filter

Live preview Hover

Opal Iridescent

Opal iridescent rainbow shimmer on hover.

#hover #animation #gradient

Live preview Hover

Color Pop Splash

Vivid color splashes across element on hover.

#hover #transform #filter

Live preview Hover

Split CMYK

CMYK color channels separate on hover.

#hover #transform

Live preview Hover

Split RGB

RGB color channels split on hover.

#hover #animation #transform

Live preview Hover

Vibrant Pop

Vibrant colors pop with extreme saturation on hover.

#hover #transform #filter

Live preview Hover

Confetti Burst

Confetti bursts outward on hover.

#hover #animation #transform

Live preview Hover

Confetti Cannon

Confetti cannon blast on hover.

#hover #animation #transform

Live preview Hover

Confetti Fall

Confetti falls on hover.

#hover #animation #transform

Live preview Hover

Confetti Scatter

Confetti scatters outward on hover.

#hover #animation #transform

Live preview Hover

Copper Warm

Warm copper glow radiates on hover.

#hover #gradient #transform

Live preview Hover

Corner Border Draw

Four accent corner brackets draw inward on hover, framing the content.

#hover #border #transform

Live preview Hover

Cube Rotate 3D

Element rotates like a cube face on hover.

#hover #transform #3d

Live preview Hover

Curtain Fall

Curtain falls down to cover content on hover.

#hover #gradient #transform

Live preview Hover

Curtain Rise

Curtain rises to reveal content on hover.

#hover #gradient #transform

Live preview Hover

Cyber Glitch

Cyberpunk RGB-split glitch with rapid clip-path jumps on hover.

#animation #hover #border

Live preview Hover

Depth Pop

Element pops forward in 3D depth on hover.

#hover #transform

Live preview Hover

Desaturate Drain

Color drains away to grayscale on hover.

#hover #gradient #transform

Live preview Hover

Desaturate Wash

Full grayscale wash with subtle blur on hover.

#hover #transform #filter

Live preview Hover

Dip Bounce

Dip down then bounce up on hover.

#hover #animation #transform

Live preview Hover

Dispersion Rainbow

Chromatic dispersion rainbow on hover.

#hover #transform

Live preview Hover

Dissolve to Dots

A dotted overlay fades in over the panel, dissolving the content into a dot matrix on hover.

#gradient #hover #border

Live preview Hover

Drift Slow

Slow ambient drift on hover.

#hover #animation #transform

Live preview Hover

Duotone Cyan

Duotone cyan-magenta filter kicks in on hover.

#hover #transform #filter

Live preview Hover

Duotone Cyan Magenta

Cyan/magenta neon duotone split on hover.

#hover #transform

Live preview Hover

Dust Puff

Dust puffs outward on hover.

#hover #transform #filter

Live preview Hover

Dust Swirl

Dust swirls around on hover.

#hover #animation #gradient

Live preview Hover

Flame Bottom Edge

Bottom edge ignites with animated flame gradient on hover.

#hover #animation #gradient

Live preview Hover

Flame Top Edge

Top edge ignites with animated flame gradient on hover.

#hover #animation #gradient

Popular tags