#gradient CSS effects

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

Live preview Hover

Iris Wipe Mask

Iris-like circle wipe reveals on hover.

#hover #gradient

Live preview Hover

Pixelate Reveal Mask

Pixelated mosaic reveals on hover.

#hover #gradient

Live preview Hover

Spotlight Cursor Mask

Spotlight reveals around the cursor on hover.

#hover #gradient

Live preview Hover

Wave Sweep Mask

Wavy mask sweeps across on hover.

#hover #gradient

Live preview Hover

Zigzag Trace Mask

Zigzag pattern traces across on hover.

#hover #gradient #transform

Live preview Hover

Melt Drip

Button melts downward with drooping corners and a falling drip on hover.

#gradient #hover #border

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

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

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

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

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

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

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

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

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

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

Shine Swipe Panel

A narrow highlight sweeps diagonally across the panel exactly once per hover.

#hover #gradient #transform

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 Shift Tile

The tile leans into a slight skew and its shadow slides out to keep it grounded.

#hover #gradient #transform

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

Thermal Map

Heat-map thermal 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

Live preview Hover

Underglow

Glow emanates from beneath on hover.

#hover #gradient #transform

Live preview Hover

Venetian Tilt

Vertical venetian blind slats rotate in 3D to let light through on hover.

#gradient #hover #3d

Live preview Hover

Vignette Darken

Edges darken with vignette on hover.

#hover #gradient

Live preview Hover

Wipe Radial

Radial wipe reveal on hover.

#hover #gradient #transform

Live preview Loaders

Accordion Bellows

Accordion bellows expanding and contracting.

#animation #gradient #transform

Live preview Loaders

Airplane Propeller

Airplane propeller spinning rapidly with motion blur.

#animation #gradient #transform

Popular tags