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

Minus Math Symbol Toggle

A minus math symbol that turns red when checked.

#transform #shadow #filter

Live preview Checkboxes

Plus Symbol Toggle

A plus math symbol that turns green 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

Tanager Toggle

A tanager spins red when checked.

#animation #transform #shadow

Live preview Checkboxes

Glass Texture Toggle

A frosted glass texture with blue tint when checked.

#gradient #transform #shadow

Live preview Checkboxes

Storm Crash Toggle

A thunderstorm shakes yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Ticket Admit Toggle

A ticket glows yellow when checked.

#transform #shadow #filter

Live preview Checkboxes

Tiger Stripes Toggle

A tiger glows orange when checked.

#transform #shadow #filter

Live preview Checkboxes

Titmouse Toggle

A titmouse fades in gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Tools Build Toggle

Tools glow amber when checked.

#transform #shadow #filter

Live preview Checkboxes

Tornado Spin Toggle

A tornado spins gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Trumpet Toggle

A trumpet bounces in gold when checked.

#animation #transform #shadow

Live preview Checkboxes

Turnstone Toggle

A turnstone shakes orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Twinkle Star Toggle

A star twinkles gold when checked.

#animation #transform #shadow

Live preview Checkboxes

Willet Toggle

A willet flips gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Window View Toggle

A window glows blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Woodpecker Toggle

A woodpecker shakes red when checked.

#animation #transform #shadow

Live preview Checkboxes

Zap Energy Toggle

A lightning bolt flickers yellow when checked.

#animation #transform #shadow

Live preview Forms

Blur Floating Label

Label starts blurred then sharpens as it lifts to the top.

#transform #border #filter

Live preview Forms

Curve Floating Label

Label arcs upward in a curved path using transform-origin trick.

#transform #shadow #border

Live preview Forms

Cyan Accent Floating Label

Crisp cyan-themed floating label input.

#transform #shadow #border

Live preview Forms

Emerald Accent Floating Label

Calm emerald-themed floating label for signup forms.

#transform #shadow #border

Live preview Forms

Floating Label Slide Up

Classic floating label that slides up when the input is focused or filled.

#transform #shadow #border

Live preview Forms

Violet Accent Floating Label

Violet-themed floating label input with soft glow.

#transform #shadow #border

Live preview Forms

Animating Icon Input

Input whose left icon bounces when input is focused.

#animation #transform #shadow

Live preview Forms

Color Changing Icon Input

Input whose icon cycles through colors on focus.

#animation #transform #shadow

Live preview Forms

Email Icon Input

Email input with envelope icon that opens on focus.

#transform #shadow #border

Live preview Forms

Grow Icon Input

Input whose icon grows in size when focused.

#transform #shadow #border

Live preview Forms

Shrink Icon Input

Input whose icon shrinks when focused (inverse effect).

#transform #shadow #border

Live preview Forms

Tag Icon Input

Tag input with tag icon that flips in on focus.

#transform #shadow #border

Live preview Forms

Birthday Input

Birthday input with cake icon.

#transform #shadow #border

Live preview Forms

Search Input with Clear Button

Search input that shows a clear (×) button when typed.

#hover #transform #shadow

Live preview Forms

Floating Label OTP

OTP boxes with floating placeholder text.

#transform #border

Live preview Forms

Credit Card Preview

Credit card visual preview that updates on input focus.

#gradient #transform #shadow

Live preview Forms

Bounce Radio

Radio indicator bounces in with springy motion on selection.

#animation #transform #border

Live preview Forms

Ripple Radio

Radio with ripple effect emanating from center on selection.

#animation #transform #border

Live preview Forms

Shake Radio

Radio options shake briefly when selected for tactile feedback.

#animation #transform #border

Live preview Forms

Spotlight Radio

Radio with radial spotlight glow on selected option.

#gradient #transform #border

Live preview Forms

Thumbs Radio

Thumbs up/down radio feedback with smooth transition.

#hover #transform #filter

Live preview Forms

3D Search Bar

Skeuomorphic 3D search bar with depth.

#transform #shadow #border

Live preview Forms

Icon Background Search

Search bar with icon in a colored background square.

#transform #shadow #border

Live preview Forms

Light Themed Select

Clean light-themed select with subtle shadow.

#transform #shadow #border

Live preview Forms

Square Select Dropdown

Sharp-cornered square select with bold border.

#transform #border

Live preview Forms

Bounce Slider

Slider whose thumb bounces when dragged.

#animation #transform #shadow

Live preview Forms

Success State Input

Input showing success state with green border and checkmark icon.

#animation #transform #shadow

Live preview Forms

Emoji Switch

Toggle with emoji that swaps between states.

#gradient #transform

Live preview Forms

Flip Switch

Switch knob flips 180 degrees when toggled.

#transform #3d

Live preview Forms

Shadow Lift Switch

Toggle knob lifts with shadow during transition.

#transform #shadow

Live preview Forms

Spotlight Switch

Toggle with radial spotlight glow around knob when active.

#gradient #transform

Live preview Forms

Brutalist Hard Edge Input

Brutalist design with hard borders, monospace and offset shadow.

#transform #shadow #border

Live preview Forms

Valid Check Mark Input

Input that shows a green checkmark when valid.

#transform #shadow #border

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 Underline Input

Bottom underline grows in green when valid.

#transform #border

Live preview Hover

3D Zoom Flip

3D combined zoom and flip on hover.

#hover #transform #3d

Live preview Hover

Bob Buoy

Buoy bobbing on water on hover.

#hover #animation #transform

Live preview Hover

Border Expand Out

Border outline expands outward on hover.

#hover #transform #border

Live preview Hover

Bulge Center

Element bulges outward in center on hover.

#hover #transform

Live preview Hover

Monochrome Shift

Element shifts to monochrome on hover.

#hover #transform #filter

Live preview Hover

Colour Split Word

The word tears into a red and cyan pair before snapping back together.

#hover #transform

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

Color Swap Fast

Foreground and background colors swap on hover.

#hover #transform #border

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

Copper Warm

Warm copper glow radiates on hover.

#hover #gradient #transform

Live preview Hover

Cyan Shift

Hue rotates to cyan on hover.

#hover #transform #filter

Live preview Hover

Cyber Glitch

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

#animation #hover #border

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

Duotone Cyan

Duotone cyan-magenta filter kicks in on hover.

#hover #transform #filter

Live preview Hover

Dust Swirl

Dust swirls around on hover.

#hover #animation #gradient

Live preview Hover

Flame Top Edge

Top edge ignites with animated flame gradient on hover.

#hover #animation #gradient

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

Fireflies Wander

Fireflies wander randomly on hover.

#hover #animation #transform

Live preview Hover

Flip 3D Coin

Coin-toss flip on hover.

#hover #animation #gradient

Live preview Hover

Flip 3D Door

Door-swing 3D flip on hover.

#hover #transform #border

Live preview Hover

Card Front Back Flip

Flips card to reveal back side on hover.

#hover #transform #3d

Live preview Hover

Flip X Axis

Element flips on X axis on hover.

#hover #transform

Live preview Hover

Flip Y Axis

Element flips on Y axis on hover.

#hover #transform

Live preview Hover

Flip Y Fast

Quick Y flip on hover.

#hover #transform #3d

Live preview Hover

Fold Double

Double fold on hover.

#hover #transform #3d

Live preview Hover

Fold Up

Folds upward on hover.

#hover #transform #3d

Live preview Hover

Arrow Corner Frame

Arrow-shaped accents point inward at each corner on hover.

#hover #transform #border

Live preview Hover

Fast Corner Trace

Single corner accent traces all four corners quickly on hover.

#hover #animation #transform

Effects tagged #transform

Popular tags