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

Fireworks Finale

A grand finale of fireworks bursts across the night sky.

#animation #gradient #transform

Live preview Backgrounds

Fluid Pour

Colorful fluid pours down in a steady thick stream.

#animation #gradient #transform

Live preview Backgrounds

Foggy Forest

Thick fog drifts among the trunks of a misty forest.

#animation #gradient #transform

Live preview Backgrounds

Fractal Tree

Self-similar fractal tree with branching limbs growing recursively.

#animation #gradient #transform

Live preview Backgrounds

Grid Scan

A perspective wireframe grid with a bright scan line sweeping down over it.

#animation #gradient #filter

Live preview Backgrounds

Hyperspace Jump

Hyperspace jump with starlines streaking past the viewer.

#animation #gradient #transform

Live preview Backgrounds

Landing Pad Lights

A circular helipad perimeter lights up in yellow sequence.

#animation #gradient #transform

Live preview Backgrounds

Lissajous Curve

Lissajous curve figure traced by harmonic oscillation.

#animation #gradient #transform

Live preview Backgrounds

Marble Swirl

Elegant marble veins swirl in classic white and grey stone.

#animation #gradient #transform

Live preview Backgrounds

Masked Halftone

A dot matrix is masked with a gradient so the pattern fades out toward one corner.

#animation #gradient #mask

Live preview Backgrounds

Meteor Shower

Streaking meteors rain across a clear dark night sky.

#animation #gradient #transform

Live preview Backgrounds

Monsoon Rainforest

Tropical rainforest leaves drip under a warm monsoon downpour.

#animation #gradient #transform

Live preview Backgrounds

Monstera Leaf

Tropical monstera leaves with signature splits overlay a jungle backdrop.

#animation #gradient #transform

Live preview Backgrounds

Morning Glory

Vivid blue morning glory vines spiral upward opening to the sun.

#animation #gradient #transform

Live preview Backgrounds

Oil Slick

An oil slick shimmers with shifting rainbow interference colors.

#animation #gradient #transform

Live preview Backgrounds

Oil on Water

Oil slick spreads on water with shifting iridescent colors.

#animation #gradient #transform

Live preview Backgrounds

Paint Mixing

Thick layers of paint fold and mix together in slow motion.

#animation #gradient #transform

Live preview Backgrounds

Paint Splash

Vivid paint splashes burst and drip across a white canvas.

#animation #gradient #transform

Live preview Backgrounds

Plasma Field

Saturated overlapping blobs swirl and blend into a flowing plasma surface.

#animation #border #transform

Live preview Backgrounds

Plasma Arc

An electric plasma arc crackles between two points.

#animation #gradient #transform

Live preview Backgrounds

Plasma Torch

A bright blue plasma jet emits a thin column of superheated gas.

#animation #gradient #transform

Live preview Backgrounds

Orange Portal

Orange exit portal swirling with hot energy field.

#animation #gradient #transform

Live preview Backgrounds

Quasar Jet

A supermassive quasar fires a blazing relativistic jet into space.

#animation #gradient #transform

Live preview Backgrounds

Rave LED Pulse

Colorful LED panels pulse and strobe to the music beat.

#animation #gradient #shadow

Live preview Backgrounds

Retro Sunset

A striped retro sun sets behind an animated horizon line in classic 80s style.

#gradient #animation #3d

Live preview Backgrounds

Running Track Curve

A red running track with painted lane stripes curving to the finish.

#animation #gradient

Live preview Backgrounds

Sand Blast

Fine sand streams horizontally in a desert wind blast.

#animation #gradient

Live preview Backgrounds

CRT Scanlines

Retro CRT scanlines roll down an old monitor screen.

#animation #gradient

Live preview Backgrounds

Ski Slope Tracks

Curved ski tracks carve through fresh powder on a mountain slope.

#animation #gradient #transform

Live preview Backgrounds

City Smog

Yellow-brown city smog hangs heavy over an urban skyline.

#animation #gradient #transform

Live preview Backgrounds

Drifting Smoke

Dark smoky layers drift and curl across an ominous backdrop.

#gradient #animation #border

Live preview Backgrounds

Snow Drift

Snowflakes drift and accumulate into soft curves on the ground.

#animation #gradient #transform

Live preview Backgrounds

Gentle Snowfall

Soft white snowflakes drift down across a winter night sky.

#gradient #animation #border

Live preview Backgrounds

Spacetime Warp

Spacetime itself warps and ripples around an invisible mass.

#animation #gradient #transform

Live preview Backgrounds

Static Noise

TV static noise grain at full intensity.

#animation #gradient

Live preview Backgrounds

Steampunk Brass Gears

Brass steampunk gears meshing in continuous rotation.

#animation #gradient #transform

Live preview Backgrounds

Quantum Superposition

Waveform superposition blending two states simultaneously.

#animation #gradient #filter

Live preview Backgrounds

Synthwave Sun

Synthwave retro sun with horizontal cut lines over grid.

#animation #gradient #transform

Live preview Backgrounds

Terrazzo

Colorful terrazzo chips embedded in pale concrete.

#animation #gradient

Live preview Backgrounds

Toile de Jouy

Classic toile de Jouy pastoral scenes repeat in muted blue on cream.

#animation #gradient

Live preview Backgrounds

Traffic Lights

Traffic lights cycle through red yellow and green.

#animation #gradient #transform

Live preview Backgrounds

Triangle Wave

Triangle wave folding symmetric peaks across the panel.

#animation #gradient #shadow

Live preview Backgrounds

Trophy Shine

A golden trophy spins with a sparkle highlight.

#animation #gradient #transform

Live preview Backgrounds

Tunnel Vortex

Concentric tunnel rings pulling viewer into infinity.

#animation #gradient

Live preview Backgrounds

Twilight Blue

Deep twilight blue deepens toward night with early star pricks.

#animation #gradient

Live preview Backgrounds

Vernal Equinox

Balanced light and dark halves mark the spring equinox boundary.

#animation #gradient #transform

Live preview Backgrounds

Violin String Vibration

Bowed violin strings vibrate with a warm amber resonance.

#animation #gradient #transform

Live preview Backgrounds

Wetland Marsh

Calm marsh water reflects reeds and a soft overcast sky.

#animation #gradient #transform

Live preview Backgrounds

White Dwarf

A dense white dwarf star glows intensely in the dark of space.

#animation #gradient #transform

Live preview Backgrounds

Calm Wind

A barely perceptible breeze stirs a pale pastel sky.

#animation #gradient

Live preview Backgrounds

Cyclone

A rotating cyclone spiral of clouds spins over tropical waters.

#animation #gradient #transform

Live preview Backgrounds

Winter Glow

A soft warm winter glow lights snow against a cool sky.

#animation #gradient

Live preview Backgrounds

Winter Solstice

The longest night of the winter solstice under a starry sky.

#animation #gradient

Live preview Backgrounds

Moroccan Zellige

Vivid Moroccan zellige mosaic tiles in star pattern.

#animation #gradient #transform

Live preview Buttons

Animated Stripe Button

Diagonal candy stripes that scroll continuously across the button.

#gradient #animation #hover

Live preview Buttons

Arc Welder Button

Industrial button with an electric arc tracing its top edge.

#hover #animation #transform

Live preview Buttons

Beetle Shell

Iridescent beetle shell in green-purple.

#animation #gradient #shadow

Live preview Buttons

3D Bounce Button

Candy button that bounces with a 3D spring on hover.

#hover #animation #transform

Live preview Buttons

Cepheid

Cepheid-variable button that pulses rhythmically.

#hover #animation #gradient

Live preview Buttons

Clock Spin Button

Circular button with a clock-hand spinner on hover.

#hover #animation #transform

Live preview Buttons

Disco Floor Button

Button with a flashing disco-tile background.

#hover #animation #gradient

Live preview Buttons

Galactic

Galactic-core button with swirling violet-blue.

#hover #animation #gradient

Live preview Buttons

Has-Selector Loading Button

Clicking swaps the label for a spinner, driven purely by the :has() parent selector.

#animation #hover #transform

Live preview Buttons

Jelly Wobble Button

Translucent jelly button that wobbles like gelatin on hover.

#hover #animation #transform

Live preview Buttons

Magenta Hot Pulse

Vivid magenta button with a throbbing pulse.

#hover #animation #transform

Live preview Buttons

Spectral Veil

Ghostly translucent button with rainbow edge.

#animation #gradient #transform

Live preview Buttons

Trailblazer

Bright orange trailblaze with motion lines.

#animation #gradient #transform

Live preview Buttons

Trefoil Knot

Three-leaf trefoil with rotating border.

#animation #gradient #transform

Live preview Buttons

Vortex Pull

Spinning vortex spiral in deep blue.

#animation #gradient #transform

Live preview Buttons

Wobble Button

Purple outline button that wobbles playfully once when hovered.

#animation #hover #3d

Live preview Cards

Aurora Gradient Card

Card with an animated aurora gradient that drifts across the background.

#gradient #animation #shadow

Live preview Cards

Board Game Card

Board game card with a dice icon, turn indicator, and a player score panel.

#animation #gradient #transform

Live preview Cards

Collectible Coin Card

Collectible coin card with a 3D embossed disc, denomination, and year.

#animation #gradient #transform

Live preview Cards

Hologram Projection

Floating translucent hologram card with scan lines and a pulsing blue glow.

#gradient #animation #glass

Live preview Cards

New Home Card

New home card with a house illustration, key, and a welcoming message.

#animation #gradient #transform

Live preview Cards

Online Status Card

Online status card with avatar, dot indicator, and activity.

#animation #gradient #shadow

Live preview Cards

Promotion Card

Promotion card with an upward arrow, trophy, and gold confetti accents.

#animation #gradient #shadow

Live preview Cards

Server Status Card

Server status card with a pulsing green LED, uptime, and a response time.

#animation #gradient #shadow

Live preview Cards

Statistics Card

Dashboard stat card with a big number, trend arrow and an animated mini sparkline.

#gradient #animation #shadow

Live preview Cards

Warning Banner Card

Warning banner card with a triangle icon, amber stripe, and an action link.

#animation #gradient #transform

Live preview Cards

Snow Weather Card

Snowy weather card with drifting snowflakes over a frosty pale-blue field.

#animation #gradient #transform

Live preview Checkboxes

Acai Toggle

An acai spins purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Alarm Clock Toggle

An alarm clock shakes red when checked.

#animation #transform #shadow

Live preview Checkboxes

Ambulance Toggle

An ambulance pulses red when checked.

#animation #transform #shadow

Live preview Checkboxes

Ant March Toggle

An ant wiggles with a dark glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Aurora Glow Toggle

A box that glows with shifting aurora gradients when checked.

#animation #gradient #transform

Live preview Checkboxes

Balloon Float Toggle

A balloon floats with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Baseball Toggle

A baseball bounces white on check.

#animation #transform #shadow

Live preview Checkboxes

Bat Fly Toggle

A bat flutters with a dark glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Bounce Pop Checkbox

The whole control squashes and springs back the moment the state changes.

#animation #transform #border

Live preview Checkboxes

Bubble Pop Checkbox

A soap bubble swells past its limit, bursts, and leaves the tick in its place.

#animation #gradient #transform

Live preview Checkboxes

Cat Purr Toggle

A cat face purrs with an orange glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Cheese Wedge Toggle

A cheese wedge brightens yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Cloud Drift In

A cloud emoji drifts in from the left with a soft blue glow and gentle bob when checked.

#animation #shadow #transform

Live preview Checkboxes

Coconut Toggle

A coconut spins brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Coffee Brew Toggle

A coffee cup steams up with a brown glow when checked.

#animation #transform #shadow

Effects tagged #animation

Popular tags