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

Message Tail Clip

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

#hover #transform

Live preview Tooltips

Spiral Shell Clip

Tooltip with a spiral shell-like curved shape.

#hover #transform

Live preview Tooltips

Commit Hash

Git commit hash tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

#hover #gradient #transform

Live preview Tooltips

Corners Bracket

Tooltip with corner brackets drawing in above the trigger.

#hover #transform #border

Live preview Tooltips

Cursor Follow

Tooltip that follows the cursor above the trigger.

#hover #animation #transform

Live preview Tooltips

Emerald Tip

Emerald green tooltip with subtle shimmer above the trigger.

#hover #gradient #transform

Live preview Tooltips

Fold Bottom

Tooltip unfolds open below the trigger.

#hover #transform #border

Live preview Tooltips

Glassmorphism Top

Frosted glass tooltip with backdrop blur above the trigger.

#hover #transform #shadow

Live preview Tooltips

Icon Crown

Tooltip with crown icon 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

Overline Draw

Tooltip with animated overline drawing above the trigger.

#hover #gradient #transform

Live preview Tooltips

PowerShell

PowerShell blue background tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Pulse Attention

Tooltip that pulses to draw attention above the trigger.

#hover #animation #transform

Live preview Tooltips

Retro 80s

Retro 80s neon sunset tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Rich Avatar

Tooltip with user avatar above the trigger.

#hover #gradient #transform

Live preview Tooltips

Shimmer Loading

Shimmer loading placeholder tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

Sky Blue Info

Sky blue tooltip with airy lightness above the trigger.

#hover #gradient #transform

Live preview Tooltips

Slide Diagonal Bottom-Right

Tooltip slides in from the bottom-right corner of the trigger.

#hover #transform #border

Live preview Tooltips

Slide Fade Bottom

Tooltip slides up from below while fading in.

#hover #transform #border

Live preview Tooltips

Speech Bubble Top

Cartoon speech bubble tooltip with tail above the trigger.

#hover #transform #border

Live preview Tooltips

Step Counter

Tooltip with step counter indicator above the trigger.

#hover #transform #border

Live preview Tooltips

Sticky Note

Yellow sticky note tooltip with curl above the trigger.

#hover #transform #shadow

Live preview Tooltips

Typing Hint Tooltip

The tooltip shows three animated dots, as if the hint were still being written.

#hover #animation #transform

Live preview Timelines

Piston Pump Pipeline

Three bores drive the extract, transform and load stages with offset piston strokes.

#animation #transform #pipeline

Live preview Toggles

Burlap Rough

Rough burlap surface with rustic coarse fibers.

#gradient #transform

Live preview Toggles

Cinnabar Red

Ancient cinnabar red with carved stone knob.

#gradient #transform #shadow

Live preview Toggles

Citrine Glow

Glowing citrine yellow with golden warmth.

#gradient #transform #shadow

Live preview Toggles

Coins / Gems

Gold coin stash converts to sparkling gems.

#gradient #transform #shadow

Live preview Toggles

Crimson Flame

Burning crimson flame with flickering glow.

#gradient #transform #shadow

Live preview Toggles

Crossbow / Slingshot

Crossbow knob becomes a slingshot on the brown track.

#transform #shadow

Live preview Toggles

Dense / Sparse

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

#gradient #transform #shadow

Live preview Toggles

Dive / Surface

Diver knob surfaces to an island on the cyan track.

#transform #shadow

Live preview Toggles

Hematite Iron

Hematite iron-black with metallic sheen.

#gradient #transform #shadow

Live preview Toggles

Liquid Wave Fill

Track fills with an animated wavy liquid that sloshes as the knob slides.

#animation #shadow #border

Live preview Toggles

OKLCH Heat Toggle

Off and on colours sit at the same OKLCH lightness, so only the hue appears to move.

#transform #shadow #oklch

Live preview Toggles

Safe / Danger

Green shield flips to a red warning triangle.

#animation #transform #shadow

Live preview Toggles

Teleport / Blink

Knob teleports across with a fading blink step.

#transform #shadow

Live preview Toggles

Tone / Dead

Sound tone knob becomes a skull when the tone goes dead.

#transform #shadow

Live preview Toggles

Tornado Form

Tornado funnel cloud forms spinning across the track.

#animation #gradient #transform

Live preview Toggles

Tourmaline Stripe

Tourmaline watermelon stripe with pink-green knob.

#gradient #transform #shadow

Live preview Toggles

Trap / Free

Mousetrap knob releases a tiny mouse when toggled on.

#transform #shadow

Live preview Toggles

Treble / Bass Clef

Treble clef knob drops to a bass clef on the violet track.

#transform #shadow

Live preview Toggles

Weekend / Weekday

Party weekend swaps to a focused weekday briefcase.

#transform #shadow

Live preview Toggles

Wool / Cotton

Wool knob becomes a fluffy cotton ball on the cream track.

#transform #shadow

Live preview Toggles

Yarn Unwind

Knobby yarn ball rolls across leaving a thread behind.

#gradient #transform

Live preview Accordions

Echo Origami Accordion

The panel unfolds in two paper leaves that swing down on a shared crease.

#checkbox #origami #perspective

Live preview Accordions

Flux Page Accordion

Chapters open like a book page turning over on its spine with a soft shade.

#checkbox #book #perspective

Live preview Avatars

Sway Isometric Avatar Plane

Three member tiles lie on an isometric plane that rocks slowly around its centre.

#isometric #transform #group

Live preview Badges

Confetti Burst Badge

Badge with colorful confetti burst animation.

#animation #transform

Live preview Badges

Electric Badge

Badge with electric pulse effect.

#animation #transform #shadow

Live preview Badges

Heartbeat Badge

Badge that beats like a heart.

#animation #transform

Live preview Badges

Spin Badge

Badge that spins around its center.

#animation #transform

Live preview Badges

Wobble Badge

Badge that wobbles side to side.

#animation #transform

Live preview Badges

Certified Ribbon Badge

Certified badge styled like an official ribbon stamp.

#transform #shadow #border

Live preview Badges

Corner Sale Ribbon

Diagonal corner ribbon with sale text overlay.

#transform #shadow #border

Live preview Badges

Exclusive Gold Badge

Gold exclusive badge with metallic sheen.

#gradient #transform #shadow

Live preview Badges

Color Cycle FX Badge

Animated badge that cycles through hue rotations.

#animation #gradient #transform

Live preview Badges

Fill Flood FX Badge

Animated badge with flooding radial fill overlay.

#animation #gradient #transform

Live preview Badges

Hue Shift FX Badge

Animated badge with gentle hue-shift in/out oscillation.

#animation #gradient #transform

Live preview Badges

Soft Pulse FX Badge

Animated badge with gentle soft-pulse scale animation.

#animation #gradient #transform

Live preview Badges

Rubber FX Badge

Animated badge with elastic rubber-band stretch.

#animation #gradient #transform

Live preview Badges

Shadow Grow FX Badge

Animated badge with growing drop shadow.

#animation #gradient #transform

Live preview Badges

Shadow Shrink FX Badge

Animated badge with shrinking shadow press effect.

#animation #gradient #transform

Live preview Badges

Swing FX Badge

Animated badge that swings like a pendulum from top anchor.

#animation #gradient #transform

Live preview Badges

Hue Rotate Pill

Pill that cycles through all hues via hue-rotate filter.

#animation #gradient #transform

Live preview Badges

Halloween Holiday Badge

Halloween-themed badge with orange and black.

#transform #shadow #border

Live preview Badges

Live Pulse Badge

A broadcast badge whose red dot sends out a fading ring on every beat.

#animation #transform #border

Live preview Badges

Neon Cyan Badge

Dark badge with glowing cyan neon outline.

#transform #shadow #border

Live preview Badges

Pulsing Notification

Notification badge that scales pulse to grab attention.

#animation #transform #border

Live preview Badges

Retro 80s Badge

Retro 80s synthwave badge with neon gradient.

#gradient #transform #shadow

Live preview Badges

Admin Role Badge

Admin role badge with red shield style.

#transform #shadow #border

Live preview Badges

Sale Flash Badge

Bright sale badge with a flashing shine sweep.

#animation #gradient #transform

Live preview Badges

Gold Wax Seal

Gold wax seal with shimmering surface.

#gradient #transform #shadow

Live preview Badges

Expired Stamp

Red expired stamp with bold lettering and rotation.

#transform #border

Live preview Badges

Flagged Stamp

Red flagged stamp for important documents.

#transform #border

Live preview Badges

Internal Stamp

Blue internal stamp for company use.

#transform #border

Live preview Badges

Sample Stamp

Pink sample stamp with playful rotation.

#transform #border

Live preview Badges

Shipped Stamp

Green shipped stamp for package tracking.

#transform #border

Live preview Badges

Busy Status Dot

Red busy status dot with strong pulse.

#animation #transform #shadow

Live preview Badges

Tier Silver Shield Badge

Silver-tier shield-shaped badge with polished metallic feel.

#gradient #transform #shadow

Live preview Backgrounds

Accretion Disk

A superheated accretion disk spirals around a central black mass.

#animation #gradient #transform

Live preview Backgrounds

Arctic Ice

Vast arctic ice floes drift slowly across a freezing polar sea.

#animation #gradient #transform

Live preview Backgrounds

Autumn Harvest

Golden harvest fields roll under a warm autumn sky.

#animation #gradient #transform

Live preview Backgrounds

Balloon Bouquet

A bouquet of bright balloons drifts gently upward.

#animation #gradient #transform

Live preview Backgrounds

BBQ Grill Flame

A backyard barbecue grill with flames licking the grates.

#animation #gradient #transform

Live preview Backgrounds

Boxing Ring Ropes

Three boxing ring ropes tension across a blue canvas.

#animation #gradient #transform

Live preview Backgrounds

Cake Candle Blow

A birthday cake with candles whose flames lean in the breeze.

#animation #gradient #transform

Live preview Backgrounds

Slot Canyon

Narrow slot canyon with deep shadows and curved walls.

#animation #gradient #transform

Live preview Backgrounds

Light Caustics

Wavy light caustics dance across a pool floor in rippling patterns.

#animation #gradient #transform

Live preview Backgrounds

Celtic Spiral Knot

Triple Celtic spiral knot weaving in continuous motion.

#animation #gradient #transform

Live preview Backgrounds

Cepheid Variable

A cepheid variable star pulses regularly in brightness.

#animation #gradient #transform

Live preview Backgrounds

Grilled Cheese Melt

A grilled cheese sandwich with cheese oozing out the side.

#animation #gradient #transform

Popular tags