#animation CSS effects

3,824 free, pure-CSS effects match the "animation" tag. Each is copy-ready and needs no library or build step.

Live preview Buttons

Abalone Shell

Iridescent abalone shell with shifting hues.

#animation #gradient #transform

Live preview Backgrounds

Deep Abyss

Lightless ocean abyss glows faintly with bioluminescent specks.

#animation #gradient #transform

Live preview Backgrounds

De Stijl Mondrian

Mondrian-style primary color blocks with bold black lines.

#animation #gradient #filter

Live preview Hover

Orbit Spiral

Spiral inward orbit on hover.

#hover #animation #transform

Live preview Loaders

Baguette Slice

Baguette being sliced.

#animation #gradient #shadow

Live preview Toggles

Active / Inactive

Pulsing green dot signals active vs a still grey one.

#animation #transform #shadow

Live preview Backgrounds

Aurora Curtain

Vertical bands of aurora light ripple like a hanging curtain.

#animation #gradient #transform

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

#hover #animation #gradient

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 Tabs

Savanna Divided Tabs

Hairline dividers separate the tabs and quietly step aside around the active one.

#border #layout #animation

Live preview Loaders

7 Segment Display

7-segment display counting.

#animation #shadow

Live preview Navigation

Color Shift Navbar

Navbar with hue-shifting links on hover.

#hover #animation #gradient

Live preview Toggles

Equalizer Wave

Flat bars bounce into an animated equalizer.

#animation #transform #shadow

Live preview Backgrounds

Brown Noise

Warm brown noise drifting like deep ambient rumble.

#animation #gradient #filter

Live preview Hover

Blink Swap

Content blinks rapidly and swaps text on each blink cycle on hover.

#animation #hover #border

Live preview Navigation

Neon Active Drawer Navbar

Drawer with a pulsing neon active indicator on the active link.

#hover #animation #shadow

Live preview Toggles

Terminal Prompt

Blinking cursor at a shell prompt toggles to a check output.

#animation #transform #shadow

Live preview Backgrounds

Cassette Rewind

Cassette reels spin rapidly in reverse as tape rewinds.

#animation #gradient #transform

Live preview Backgrounds

Chrome Bubble

Liquid chrome bubble reflecting environment with shifting glare.

#animation #gradient #transform

Live preview Backgrounds

Baroque Damask

Opulent baroque damask with gilded floral flourishes.

#animation #gradient #filter

Live preview Backgrounds

Thin Film Interference

Soap-film thin-film interference patterns shifting bands.

#animation #gradient #transform

Live preview Backgrounds

Animated Ocean Waves

Layered SVG wave shapes ripple across a calm ocean horizon.

#gradient #animation #border

Live preview Buttons

Retro Terminal Button

Monospace terminal-style button with blinking cursor block.

#animation #hover #shadow

Live preview Cards

Locked Achievement Card

Locked achievement card with a padlock, blurred reward, and unlock hint.

#animation #gradient #transform

Live preview Checkboxes

Yellowjacket Toggle

A yellowjacket spins yellow when checked.

#animation #transform #shadow

Live preview Hover

Wave Ripple Distort

Wave ripple distortion on hover.

#hover #animation #transform

Live preview Loaders

Billiards Cue

Pool cue striking ball.

#animation #gradient #transform

Live preview Loaders

Black Hole

A swirling multicolor accretion disk being consumed by a dark core.

#gradient #animation #shadow

Live preview Loaders

Elevator

Elevator car rising and falling inside its shaft.

#animation #gradient #border

Live preview Navigation

Vertical Tab Gradient Bg Flow

Vertical tabs with an animated gradient background flow on the active.

#hover #animation #gradient

Live preview Text

Chess Knight

Chess knight piece on text.

#animation #transform #shadow

Live preview Text

Fade Pulse Deep

Deep pulsing fade animation.

#animation

Live preview Toggles

Whirl Pool

Spinning whirlpool swirls water around the knob.

#animation #gradient #transform

Live preview Accordions

Rivet Downloads Accordion

Build groups punch open a format list where each row shows its extension and weight.

#details #download #clip-path

Live preview Avatars

Copper Verified Badge Avatar

A copper check badge sits in the corner and pops when the avatar is hovered.

#badge #verified #animation

Live preview Badges

Breathe Glow Badge

Badge with breathing glow effect.

#animation #transform #shadow

Live preview Badges

Glisten Badge

Badge with glistening sparkle dots animation.

#animation #gradient #shadow

Live preview Badges

Pulse Color Badge

Badge with color cycling through palette.

#animation

Live preview Badges

Ripple Badge

Badge with expanding ripple waves.

#animation #transform #border

Live preview Badges

Spring Pop Badge

Badge that springs into view with overshoot.

#animation #transform

Live preview Badges

Caret Typing Badge

Badge with blinking caret like terminal input.

#animation #border

Live preview Badges

BG Fade FX Badge

Animated badge with cross-fading background colors.

#animation #gradient #shadow

Live preview Badges

Confetti Burst FX Badge

Animated badge with confetti-burst particle dots.

#animation #gradient #transform

Live preview Badges

New Pill Badge

Green pill badge announcing new content with a subtle pop-in.

#animation #gradient #transform

Live preview Backgrounds

Abalone Nacre

Abalone shell nacre with shifting iridescent colors.

#animation #gradient #transform

Live preview Backgrounds

Amplifier Pulse

An amplifier's volume bars glow with each pulse of music.

#animation #gradient #transform

Live preview Backgrounds

Art Deco Fan

Geometric art deco sunburst fans radiate in gold and black.

#animation #gradient #transform

Live preview Backgrounds

Asteroid Belt

Rocks of an asteroid belt drift slowly in orbit around the sun.

#animation #gradient #transform

Live preview Backgrounds

Beacon Sweep

A rotating beacon casts a sweeping cone of warning light.

#animation #gradient #transform

Live preview Backgrounds

Beetle Wing Iridescence

Jewel beetle wing shifting with structural green-gold color.

#animation #gradient #transform

Live preview Backgrounds

Rising Bubbles

Translucent bubbles float upward through a watery blue space.

#gradient #animation #border

Live preview Backgrounds

Candle Flame Row

A row of candle flames flicker gently in a dark setting.

#animation #gradient #transform

Live preview Backgrounds

Checkered Flag

A black and white checkered flag waves in the wind.

#animation #gradient #transform

Live preview Backgrounds

Cherry Grove

Pink cherry blossom petals drift through a serene grove.

#animation #gradient #transform

Live preview Backgrounds

Wind Chime Spin

Tubular wind chimes sway and ring in a gentle breeze.

#animation #gradient #transform

Live preview Backgrounds

Christmas Tree Lights

Twinkling Christmas tree lights blink in festive colors.

#animation #gradient #shadow

Live preview Backgrounds

Comet NEOWISE

Comet NEOWISE displays a brilliant twin tail in twilight.

#animation #gradient #transform

Live preview Backgrounds

Cracked Concrete

Grey concrete with dark cracks branching across the surface.

#animation #gradient #filter

Live preview Backgrounds

Cotton Candy Spin

A swirl of pink cotton candy spins around a paper cone.

#animation #gradient #transform

Live preview Backgrounds

Dandelion Seeds

Floating dandelion seeds drift away on a gentle summer breeze.

#animation #gradient #transform

Live preview Backgrounds

Sahara Desert

Endless Sahara dunes ripple golden under a fierce sun.

#animation #gradient

Live preview Backgrounds

Diagonal Moving Lines

Crisp neon diagonal lines sweep across a dark backdrop like a synth scan.

#gradient #animation #3d

Live preview Backgrounds

Dichroic Glass

Dichroic glass shifts between transmitted and reflected colors.

#animation #gradient

Live preview Backgrounds

Crimson Dusk

A dramatic crimson dusk ignites the horizon in red.

#animation #gradient

Live preview Backgrounds

Electric Keyboard

An electric keyboard's keys pulse with neon glow as they play.

#animation #gradient #shadow

Live preview Backgrounds

Foggy Forest

Thick fog rolls between dark silhouetted trees at dawn.

#animation #gradient #transform

Live preview Backgrounds

Spiral Galaxy

A swirling spiral galaxy of stars rotates in deep space.

#gradient #animation #border

Live preview Backgrounds

Gradient Shift

A wide multi-stop gradient that continuously cycles its position for a calm flow.

#gradient #animation #border

Live preview Backgrounds

Koch Snowflake

Koch snowflake fractal with infinite crystalline edges.

#animation #gradient #transform

Live preview Backgrounds

Tuning Fork Ring

A struck tuning fork vibrates and emits visible resonance waves.

#animation #gradient #transform

Live preview Backgrounds

White Noise Snow

Television white-noise snow with analog flicker.

#animation #gradient

Live preview Backgrounds

Wormhole Spin

Wormhole throat spinning with swirling space-time distortion.

#animation #gradient #transform

Live preview Buttons

Amber Glow Button

Warm amber button with a soft pulsing radial glow.

#hover #animation #gradient

Live preview Buttons

Binary Stream Button

Matrix-style button with falling binary digits in the background.

#hover #animation #transform

Live preview Buttons

Ocean Tide

Waves rolling across a blue button face.

#animation #gradient #transform

Live preview Buttons

Smoke Drift

Translucent gray smoke drifting upward.

#animation #gradient #transform

Live preview Buttons

Violet Storm

Deep violet button with lightning flicker.

#animation #gradient #shadow

Live preview Checkboxes

Bacon Sizzle Toggle

A bacon strip wiggles with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Battery Charge Toggle

A battery glows green when checked.

#animation #transform #shadow

Live preview Checkboxes

Espresso Toggle

An espresso pulses brown when checked.

#animation #transform #shadow

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

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

Pickup Truck Toggle

A pickup truck bounces in orange when checked.

#animation #transform #shadow

Live preview Forms

Stars Background Input

Cosmic starfield background with twinkling dots.

#animation #gradient #shadow

Live preview Hover

Border Gradient Flow

Animated gradient border flows on hover.

#hover #animation #gradient

Live preview Hover

Needle Right Edge

Vertical needle bar slides in from right edge on hover.

#hover #animation #gradient

Live preview Hover

Flash Edges

Edges flash bright white on hover.

#hover #animation #shadow

Live preview Hover

Dashes Crawl Frame

Dashed border marches around the element on hover.

#hover #animation #border

Live preview Hover

Glitter Shimmer

Glitter shimmers across surface on hover.

#hover #animation #gradient

Live preview Hover

Glitter Sparkle

Glitter sparkles on hover.

#hover #animation #gradient

Live preview Hover

Pop Letter

Letters pop up sequentially on hover.

#hover #animation #transform

Live preview Hover

Typewriter Reveal

Text types out character by character on hover.

#hover #animation

Popular tags