#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

Dispersion Spectrum

Full spectrum dispersion splits on hover.

#hover #gradient

Live preview Hover

Flame Bottom Edge

Bottom edge ignites with animated flame gradient on hover.

#hover #animation #gradient

Live preview Hover

Needle Left Edge

Vertical needle bar slides in from left edge on hover.

#hover #animation #gradient

Live preview Hover

Evaporate Up

Content floats upward with a vertical blur as if evaporating on hover.

#gradient #hover #border

Live preview Hover

Fire Rise

Flames rise upward on hover.

#hover #gradient

Live preview Hover

Flip Coin

Element flips like a spinning coin on hover.

#hover #gradient #transform

Live preview Hover

Chevron Trace Frame

Chevron pattern traces the border on hover.

#hover #gradient #transform

Live preview Hover

Hologram Edge Frame

Holographic shimmer traces the frame on hover.

#hover #animation #gradient

Live preview Hover

Ribbon Trace Frame

Ribbon-like band traces around the border on hover.

#hover #animation #gradient

Live preview Hover

Stripes Slide Frame

Diagonal stripes slide across the border on hover.

#hover #gradient #border

Live preview Hover

Zipper Open Frame

Zipper teeth separate as frame opens on hover.

#hover #gradient #border

Live preview Hover

Frost Freeze

Icy crystal pattern forms over the panel with a frosted blue tint on hover.

#gradient #hover #shadow

Live preview Hover

Glow Aura Orb

Expanding aura orb radiates on hover.

#hover #gradient #transform

Live preview Hover

Glow Gleam Sweep

Bright gleam sweeps across on hover.

#hover #gradient #transform

Live preview Hover

Glow Gradient Flow

Animated gradient glow flows around on hover.

#hover #animation #gradient

Live preview Hover

Glow Halo Disc

Floating halo disc forms above on hover.

#hover #gradient #transform

Live preview Hover

Glow Shimmer Wave

Shimmer wave of light on hover.

#hover #gradient #transform

Live preview Hover

Glow Twinkle Field

Twinkling starfield glows on hover.

#hover #animation #gradient

Live preview Hover

Glow Vignette Deep

Deep vignette shadow with inner glow on hover.

#hover #gradient #shadow

Live preview Hover

Gold Sheen Sweep

Metallic gold sheen sweeps diagonally on hover.

#hover #gradient #transform

Live preview Hover

Gradient Glow

Multi-color gradient glow surrounds on hover.

#hover #animation #gradient

Live preview Hover

Gradient Sweep

A diagonal gradient band sweeps across the button on hover.

#gradient #hover #border

Live preview Hover

Grayscale Full

Complete grayscale conversion on hover.

#hover #gradient #transform

Live preview Hover

Hue Cycle

Element cycles through the full hue spectrum on hover.

#hover #animation #gradient

Live preview Hover

Image Zoom Overlay

Image scales up gently while a dark overlay fades in with a caption.

#gradient #hover #border

Live preview Hover

Implode

Content shrinks toward a central point with a vortex glow on hover.

#gradient #hover #border

Live preview Hover

Iris Close

Iris-shutter closes on hover.

#hover #gradient #transform

Live preview Hover

Iris Expand

Iris expands to reveal on hover.

#hover #gradient #transform

Live preview Hover

Iris Shrink

Iris shrinks to a point on hover.

#hover #gradient

Live preview Hover

Key Light Studio

Studio key-light sweep on hover.

#hover #gradient #transform

Live preview Hover

Lens Flare

Lens flare spots drift across on hover.

#hover #gradient

Live preview Hover

Lens Flare Burst

Burst of lens flares on hover.

#hover #gradient

Live preview Hover

Liquid Fill

Liquid fills up from bottom on hover.

#hover #gradient

Live preview Hover

Circle Clip Grow

Circle clip-path grows to reveal on hover.

#hover #gradient

Live preview Hover

Circle Clip Shrink

Circle clip-path shrinks to reveal original on hover.

#hover #gradient

Live preview Hover

Dots Grow Mask

Dots multiply and grow to fill on hover.

#hover #animation #gradient

Live preview Hover

Grid Emerge Mask

Grid pattern emerges across the element on hover.

#hover #gradient

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

Effects tagged #gradient

Popular tags