#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

BG Confetti Fall

Confetti pattern falls on background on hover.

#hover #animation #gradient

Live preview Hover

BG Gradient Rotate

Background gradient rotates on hover.

#hover #animation #gradient

Live preview Hover

BG Grid Scroll

Grid pattern scrolls on hover.

#hover #animation #gradient

Live preview Hover

BG Mesh Shift

Mesh gradient layers shift on hover.

#hover #gradient

Live preview Hover

BG Noise Shimmer

Noise texture shimmers on hover.

#hover #animation #gradient

Live preview Hover

BG Parallax Shift

Background layers shift on hover.

#hover #gradient

Live preview Hover

BG Pattern Move

Background pattern shifts on hover.

#hover #animation #gradient

Live preview Hover

BG Radial Pulse

Radial gradient pulses on hover.

#hover #animation #gradient

Live preview Hover

BG Scan Line

Scan line passes over background on hover.

#hover #animation #gradient

Live preview Hover

BG Shimmer

Shimmer sweeps across background on hover.

#hover #gradient #transform

Live preview Hover

BG Spotlight Reveal

Spotlight reveals hidden bg on hover.

#hover #gradient

Live preview Hover

BG Stripe Roll

Diagonal stripes roll on hover.

#hover #animation #gradient

Live preview Hover

BG Vignette Pulse

Vignette pulses around edges on hover.

#hover #animation #gradient

Live preview Hover

BG Water Ripple

Water-like ripple on hover.

#hover #animation #gradient

Live preview Hover

BG Zoom Pan

Background zooms and pans on hover.

#hover #gradient

Live preview Hover

Blinds Roll Up

Horizontal venetian blind slats roll up one-by-one to reveal content on hover.

#gradient #hover #shadow

Live preview Hover

Border Beam Trace

Light beam traces around border on hover.

#hover #animation #gradient

Live preview Hover

Border Conic Spin

Conic gradient border spins on hover.

#hover #animation #gradient

Live preview Hover

Border Glow Trace

Glowing dot traces around border on hover.

#hover #animation #gradient

Live preview Hover

Bubbles Float

Floating bubbles rise on hover.

#hover #animation #gradient

Live preview Hover

Bubbles Rise

Bubbles rise upward on hover.

#hover #animation #gradient

Live preview Hover

Checker Hide

Checker pattern hides on hover.

#hover #gradient

Live preview Hover

Checker Reveal

Checker pattern reveals new color on hover.

#hover #gradient

Live preview Hover

Amber Glow

Warm amber glow on hover.

#hover #gradient #shadow

Live preview Hover

Amethyst Purple

Amethyst purple shine on hover.

#hover #gradient

Live preview Hover

Aquamarine

Aquamarine sea-water tint on hover.

#hover #gradient

Live preview Hover

Berry Burst

Berry purple-magenta burst on hover.

#hover #gradient

Live preview Hover

Burgundy Rich

Rich burgundy wine tint on hover.

#hover #gradient

Live preview Hover

Clay Earth

Earth clay brown tint on hover.

#hover #gradient

Live preview Hover

Coral Reef

Coral reef orange-pink tint on hover.

#hover #gradient

Live preview Hover

Dawn Tint

Soft pink dawn tint washes over on hover.

#hover #gradient

Live preview Hover

Dusk Tint

Deep dusk purple tint on hover.

#hover #gradient

Live preview Hover

Emerald Shine

Emerald green shine on hover.

#hover #gradient #shadow

Live preview Hover

Forest Deep

Deep forest green on hover.

#hover #gradient

Live preview Hover

Lava Flow

Molten lava flow gradient on hover.

#hover #animation #gradient

Live preview Hover

Lemon Zest

Zesty lemon yellow tint on hover.

#hover #gradient

Live preview Hover

Mint Cool

Cool mint green tint on hover.

#hover #gradient

Live preview Hover

Mustard Yellow

Mustard yellow tint on hover.

#hover #gradient

Live preview Hover

Mute Fade

Colors mute and fade on hover.

#hover #gradient #filter

Live preview Hover

Onyx Black

Onyx deep black shine on hover.

#hover #gradient #shadow

Live preview Hover

Opal Iridescent

Opal iridescent rainbow shimmer on hover.

#hover #animation #gradient

Live preview Hover

Pastel Wash

Soft pastel wash overlay on hover.

#hover #gradient

Live preview Hover

Pearl Shimmer

Pearlescent shimmer on hover.

#hover #animation #gradient

Live preview Hover

Rainbow Static

Static rainbow gradient on hover.

#hover #gradient

Live preview Hover

Rose Quartz

Rose quartz pink shimmer on hover.

#hover #gradient

Live preview Hover

Sand Warm

Warm sand tan tint on hover.

#hover #gradient

Live preview Hover

Sapphire Blue

Deep sapphire blue glow on hover.

#hover #gradient

Live preview Hover

Sunrise Glow

Soft sunrise gradient emerges on hover.

#hover #gradient

Live preview Hover

Sunset Glow

Warm sunset gradient glow on hover.

#hover #gradient #shadow

Live preview Hover

Tangerine

Bright tangerine orange on hover.

#hover #gradient

Live preview Hover

Thermal Hot

Thermal heat-map colors fire up on hover.

#hover #gradient

Live preview Hover

Turquoise Sea

Turquoise sea gradient on hover.

#hover #gradient

Live preview Hover

Twilight Shift

Twilight purple-blue shift on hover.

#hover #gradient

Live preview Hover

Vivid Surge

Saturation surges to maximum on hover.

#hover #gradient #filter

Live preview Hover

CRT Flicker

Screen brightness flickers erratically with a phosphor glow on hover.

#gradient #animation #hover

Live preview Hover

Curtain Rise

Curtain rises to reveal content on hover.

#hover #gradient #transform

Live preview Hover

Desaturate Drain

Color drains away to grayscale on hover.

#hover #gradient #transform

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

Rainbow Arc Frame

Rainbow gradient arc 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

VHS Trace Frame

VHS tracking distortion lines trace the border on hover.

#hover #animation #gradient

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

Popular tags