#gradient CSS effects

4,959 free, pure-CSS effects match the "gradient" tag. Each is copy-ready and needs no library or build step.

Live preview Hover

Mosaic Assemble

Mosaic tiles assemble on hover.

#hover #gradient

Live preview Hover

Mosaic Disperse

Mosaic tiles disperse on hover.

#hover #gradient

Live preview Hover

Mosaic Tile Flip

A 3x3 grid of small tiles flips in 3D in a staggered wave on hover.

#gradient #hover #3d

Live preview Hover

Motion Smear

Label smears horizontally with a directional blur as if caught mid-motion on hover.

#gradient #hover #border

Live preview Hover

Origami Fold

Element folds like origami on hover.

#hover #gradient #transform

Live preview Hover

Paint Brush

Brush stroke paint on hover.

#hover #gradient #transform

Live preview Hover

Paint Roller

Paint roller coats on hover.

#hover #gradient #transform

Live preview Hover

Paint Spray

Spray-paint splatter on hover.

#hover #gradient

Live preview Hover

Ash Fall

Ash particles fall on hover.

#hover #animation #gradient

Live preview Hover

Aurora Borealis

Northern lights aurora shifts on hover.

#hover #animation #gradient

Live preview Hover

Bonfire Blaze

Bonfire blaze lights up on hover.

#hover #animation #gradient

Live preview Hover

Bubble Pop

Bubbles pop on hover.

#hover #animation #gradient

Live preview Hover

Bubble Stream

Stream of bubbles rises on hover.

#hover #animation #gradient

Live preview Hover

Candle Flame

Soft candle flame flickers on hover.

#hover #animation #gradient

Live preview Hover

Cloud Drift

Clouds drift across on hover.

#hover #animation #gradient

Live preview Hover

Comet Trail

Comet streaks across on hover.

#hover #animation #gradient

Live preview Hover

Confetti Rain

Confetti rains down on hover.

#hover #animation #gradient

Live preview Hover

Cosmos Particles

Cosmic stardust swirls on hover.

#hover #animation #gradient

Live preview Hover

Dew Drops

Dew drops form on hover.

#hover #animation #gradient

Live preview Hover

Electric Arc

Electric arcs flicker on hover.

#hover #animation #gradient

Live preview Hover

Fairy Dust

Fairy dust sparkles trail on hover.

#hover #animation #gradient

Live preview Hover

Feather Drift

Feathers drift down on hover.

#hover #animation #gradient

Live preview Hover

Foam Fizz

Foam fizzles on hover.

#hover #animation #gradient

Live preview Hover

Fog Roll

Fog rolls in across the element on hover.

#hover #animation #gradient

Live preview Hover

Galaxy Particles

Galaxy of stars swirls around on hover.

#hover #animation #gradient

Live preview Hover

Geyser Spray

Geyser sprays upward on hover.

#hover #animation #gradient

Live preview Hover

Hail Stones

Hail stones fall on hover.

#hover #animation #gradient

Live preview Hover

Light Rays

Light rays beam on hover.

#hover #animation #gradient

Live preview Hover

Lightning Bolt

Lightning bolt strikes on hover.

#hover #animation #gradient

Live preview Hover

Magic Sparkle

Magic sparkles burst on hover.

#hover #animation #gradient

Live preview Hover

Meteor Shower

Multiple meteors streak down on hover.

#hover #animation #gradient

Live preview Hover

Northern Lights

Soft northern lights drift on hover.

#hover #animation #gradient

Live preview Hover

Plasma Stream

Plasma stream flows on hover.

#hover #animation #gradient

Live preview Hover

Rain Storm

Rain storm falls on hover.

#hover #animation #gradient

Live preview Hover

Rocket Launch

Rocket launches upward on hover.

#hover #animation #gradient

Live preview Hover

Smoke Trail

Smoke trail rises on hover.

#hover #animation #gradient

Live preview Hover

Snow Blizzard

Snow blizzard swirls on hover.

#hover #animation #gradient

Live preview Hover

Stardust

Magical stardust sprinkles on hover.

#hover #animation #gradient

Live preview Hover

Steam Rise

Steam wisps rise on hover.

#hover #animation #gradient

Live preview Hover

Torch Flame

Torch flame blazes on hover.

#hover #animation #gradient

Live preview Hover

Tornado Particles

Tornado-like swirling particles on hover.

#hover #animation #gradient

Live preview Hover

Vapor Mist

Soft vapor mist drifts on hover.

#hover #animation #gradient

Live preview Hover

Vortex Particles

Vortex of particles spins around the element on hover.

#hover #animation #gradient

Live preview Hover

Waterfall

Waterfall cascades down on hover.

#hover #animation #gradient

Live preview Hover

Wave Crest

Wave crests roll on hover.

#hover #animation #gradient

Live preview Hover

Wind Blow

Wind-like motion lines blow across on hover.

#hover #animation #gradient

Live preview Hover

Petals Fall

Cherry petals drift down on hover.

#hover #animation #gradient

Live preview Hover

Pixel Grid Light

A fine grid of pixel dots lights up across the panel on hover.

#gradient #hover #shadow

Live preview Hover

Polychrome Rainbow

Animated rainbow wash on hover.

#hover #animation #gradient

Live preview Hover

Purple Haze

Dreamy purple haze drifts over on hover.

#hover #gradient #transform

Live preview Hover

Rain Pour

Pouring rain on hover.

#hover #animation #gradient

Live preview Hover

Rainbow Text Flow

Rainbow gradient flows across text on hover.

#hover #animation #gradient

Live preview Hover

Ray Burst

Light rays burst outward from center on hover.

#hover #animation #gradient

Live preview Hover

Reflection Glass

Frosted glass reflection on hover.

#hover #gradient #transform

Live preview Hover

Reflection Mirror

Mirror reflection beneath on hover.

#hover #gradient #transform

Live preview Hover

Reflection Water

Wavy water reflection on hover.

#hover #animation #gradient

Live preview Hover

Refraction Prism

Prism splits light on hover.

#hover #gradient #transform

Live preview Hover

Ripple Pulse

An expanding ring ripples outward from the button on hover.

#gradient #hover #border

Live preview Hover

Rotate 3D Coin

Coin-spin on Y-axis on hover.

#hover #animation #gradient

Live preview Hover

Scale + Blur Background

Background scales up and blurs while a foreground panel focuses in.

#gradient #hover #shadow

Live preview Hover

Scanline Sweep

A bright CRT scanline sweeps vertically down the panel on hover.

#gradient #animation #hover

Live preview Hover

Shadow Clone

Two blurred echo clones offset diagonally behind the button on hover.

#gradient #hover #shadow

Live preview Hover

Shadow Perspective

Perspective floor shadow on hover.

#hover #gradient #transform

Live preview Hover

Shatter Glass

Panel splits into 4 glassy quadrants that fly outward and fade on hover.

#gradient #hover #glass

Live preview Hover

Shatter Glass

Shatters into glass shards on hover.

#hover #gradient #transform

Live preview Hover

Shimmer Veil

Shimmering veil over content on hover.

#hover #gradient

Live preview Hover

Shine Line Sweep

A bright shine band sweeps diagonally across the icon button.

#gradient #hover #border

Live preview Hover

Shutter Close

Four triangular shutter blades sweep in from the corners to close over the panel on hover.

#gradient #hover #shadow

Live preview Hover

Silver Shine

Cool silver shine sweeps across on hover.

#hover #gradient

Live preview Hover

Skew Tilt Button

Button skews horizontally on hover for a playful tilt.

#gradient #hover #shadow

Live preview Hover

Slide Reveal Overlay

A colored panel slides up from below, swapping the label text color.

#gradient #hover #border

Live preview Hover

Smoke Curl

Smoke curls upward on hover.

#hover #animation #gradient

Live preview Hover

Smoke Rise

Smoke rises upward on hover.

#hover #gradient #transform

Live preview Hover

Snow Drift

Snow drifts down on hover.

#hover #animation #gradient

Live preview Hover

Snow Fall

Snow falls across surface on hover.

#hover #animation #gradient

Live preview Hover

Snow Swirl

Snow swirls in vortex on hover.

#hover #animation #gradient

Live preview Hover

Sparks Rain

Sparks rain down on hover.

#hover #animation #gradient

Live preview Hover

Sparks Trail

Trail of sparks follows on hover.

#hover #animation #gradient

Live preview Hover

Cursor Spotlight

A radial spotlight follows the cursor across the surface on hover.

#gradient #hover #border

Live preview Hover

Spotlight Cursor

Spotlight follows the cursor across the surface.

#hover #gradient

Live preview Hover

Spotlight Warm Glow

Warm spotlight intensifies on hover.

#hover #gradient #shadow

Live preview Hover

Spotlight Zoom

Spotlight zooms in and brightens on hover.

#hover #gradient #transform

Live preview Hover

Stage Light Spot

Theatrical stage spot on hover.

#hover #gradient #transform

Live preview Hover

Starburst Rays

Radiating starburst rays on hover.

#hover #gradient #transform

Live preview Hover

Stars Spin

Stars spin in galaxy on hover.

#hover #animation #gradient

Live preview Hover

Stars Twinkle

Stars twinkle in night sky on hover.

#hover #animation #gradient

Live preview Hover

Gradient Fill Text

Gradient fill appears in text on hover.

#hover #gradient

Live preview Hover

Image Fill Text

Image-like pattern fills text on hover.

#hover #gradient

Live preview Hover

Pattern Fill Text

Pattern fills text on hover.

#hover #gradient

Live preview Hover

Text Mask Reveal

A duplicate gradient-filled text slides up to mask-reveal on hover.

#gradient #hover #transform

Live preview Hover

Thermal Map

Heat-map thermal gradient on hover.

#hover #gradient #shadow

Live preview Hover

Top Light Beam

Light beam shines down from top on hover.

#hover #gradient #transform

Live preview Hover

Tritone Forest

Earthy forest tritone gradient on hover.

#hover #gradient #shadow

Live preview Hover

Tritone Ocean

Deep ocean tritone on hover.

#hover #gradient #shadow

Live preview Hover

Tritone Sunset

Three-band sunset gradient overlay on hover.

#hover #gradient #shadow

Live preview Hover

TV Turn Off

Panel collapses to a thin horizontal line then fades like an old TV switching off.

#gradient #hover #border

Popular tags