#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

Jade Stone

Jade green stone tint on hover.

#hover #gradient

Live preview Hover

Lava Flow

Molten lava flow gradient on hover.

#hover #animation #gradient

Live preview Hover

Lavender Mist

Soft lavender mist tint on hover.

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

Ruby Red

Deep ruby red glow on hover.

#hover #gradient

Live preview Hover

Sage Soft

Soft sage green tint 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

Sky Bright

Bright sky blue 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 Cold

Cool thermal colors flow on hover.

#hover #gradient

Live preview Hover

Thermal Hot

Thermal heat-map colors fire up on hover.

#hover #gradient

Live preview Hover

Topaz Yellow

Bright topaz yellow 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

Violet Dream

Dreamy violet gradient on hover.

#hover #gradient

Live preview Hover

Vivid Surge

Saturation surges to maximum on hover.

#hover #gradient #filter

Live preview Hover

Color Warp BG

Background warps through colors on hover.

#hover #gradient

Live preview Hover

Contrast Punch

Contrast spikes for a punchy look on hover.

#hover #gradient #filter

Live preview Hover

Cool Overlay

Cool blue overlay washes in on hover.

#hover #gradient

Live preview Hover

Copper Warm

Warm copper glow radiates on hover.

#hover #gradient #transform

Live preview Hover

CRT Flicker

Screen brightness flickers erratically with a phosphor glow on hover.

#gradient #animation #hover

Live preview Hover

Curtain Fall

Curtain falls down to cover content on hover.

#hover #gradient #transform

Live preview Hover

Curtain Open

Two colored curtains split apart horizontally to reveal content on hover.

#gradient #hover #shadow

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

Dissolve to Dots

A dotted overlay fades in over the panel, dissolving the content into a dot matrix on hover.

#gradient #hover #border

Live preview Hover

Dust Swirl

Dust swirls around on hover.

#hover #animation #gradient

Live preview Hover

Flame Bottom Edge

Bottom edge ignites with animated flame gradient on hover.

#hover #animation #gradient

Live preview Hover

Flame Top Edge

Top 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

Needle Right Edge

Vertical needle bar slides in from right 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

Aurora Edge Frame

Aurora-like gradient drifts along the edge on hover.

#hover #animation #gradient

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

Glitter Shimmer

Glitter shimmers across surface on hover.

#hover #animation #gradient

Live preview Hover

Glitter Sparkle

Glitter sparkles on hover.

#hover #animation #gradient

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

Bright spotlight beam from above 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

Grayscale Reveal

Starts grayscale, hover reveals full color.

#hover #gradient #transform

Live preview Hover

Highlight Sweep

Bright highlight band sweeps across 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

Hue Shift Cool

Hue rotates toward cool tones on hover.

#hover #gradient #transform

Live preview Hover

Hue Shift Warm

Hue rotates toward warm tones on hover.

#hover #gradient #transform

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

Lens Flare Soft

Soft anamorphic lens flare on hover.

#hover #gradient #transform

Live preview Hover

Liquid Fill

Liquid fills up from bottom on hover.

#hover #gradient

Live preview Hover

Magnetic Button

Button translates toward the cursor for a magnetic pull feel.

#gradient #hover #shadow

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

Popular tags