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

Wave Edge Clip

Tooltip with a wavy bottom edge clip-path.

#hover #gradient #transform

Live preview Tooltips

Coach Mark

Coach mark tooltip pointing to a feature above the trigger.

#hover #gradient #transform

Live preview Tooltips

Concrete Texture

Raw concrete texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Constellation

Tooltip with starry constellation above the trigger.

#hover #gradient #transform

Live preview Tooltips

Coral Warm

Warm coral tooltip with soft gradient above the trigger.

#hover #gradient #transform

Live preview Tooltips

Cosmic Nebula

Cosmic nebula tooltip with swirling purple-blue star clouds.

#hover #gradient #transform

Live preview Tooltips

Cotton Candy

Pink cotton candy tooltip with sweet gradient above the trigger.

#hover #gradient #transform

Live preview Tooltips

Perforated Coupon

Tooltip styled like a perforated coupon with dashed divider.

#hover #gradient #transform

Live preview Tooltips

Crayon Texture

Crayon-waxy texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Crimson Velvet

Deep crimson tooltip with a gold border accent above the trigger.

#hover #gradient #transform

Live preview Tooltips

Crinkle Paper

Crinkled paper texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Cross Hatch Background

Tooltip with a cross-hatched diagonal line background pattern.

#hover #gradient #transform

Live preview Tooltips

Cursor Spotlight

Tooltip with a radial spotlight mask highlighting the text.

#hover #gradient #transform

Live preview Tooltips

Desert Dune

Sandy desert-dune tooltip with warm ochre tones.

#hover #gradient #transform

Live preview Tooltips

Diamond Shine

Diamond-like sparkling tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

Diploma Ribbon

Diploma tooltip with ribbon-tied parchment styling.

#hover #gradient #transform

Live preview Tooltips

Dot Pattern Background

Tooltip with a dotted polka background pattern.

#hover #gradient #transform

Live preview Tooltips

Easter Egg

Colorful Easter egg tooltip with striped pattern.

#hover #gradient #transform

Live preview Tooltips

Emerald Green

Emerald green gem tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Fire Flame

Firey red-orange flame tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Foil Shine

Shiny foil-like tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

Forest Green

Deep forest green tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Forest Mist

Misty forest tooltip with soft green-teal foggy glow.

#hover #gradient #transform

Live preview Tooltips

Frame Draw

Tooltip with frame that draws itself above the trigger.

#hover #gradient #transform

Live preview Tooltips

Grid Corner Frame

Tooltip with grid-line decorations only at the four corners.

#hover #gradient #transform

Live preview Tooltips

Galaxy Swirl

Galaxy swirl tooltip with a spiraling cosmic gradient.

#hover #gradient #transform

Live preview Tooltips

Gem Multicolor

Multicolor gem-style tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Glitch Noise TV

Tooltip with a static-noise TV pattern background.

#hover #animation #gradient

Live preview Tooltips

Glitch Pixel Split

Tooltip with pixelated horizontal split glitch bands.

#hover #animation #gradient

Live preview Tooltips

Gold Shine

Golden tooltip with shimmering shine above the trigger.

#hover #gradient #transform

Live preview Tooltips

Gradient Top

Tooltip with a vibrant gradient background above the trigger.

#hover #gradient #transform

Live preview Tooltips

Grayscale To Color

Tooltip fades from grayscale to full color above the trigger.

#hover #gradient #transform

Live preview Tooltips

Grid Pattern Background

Tooltip with a graph-paper grid background pattern.

#hover #gradient #transform

Live preview Tooltips

Halloween Pumpkin

Spooky orange pumpkin-styled Halloween tooltip.

#hover #gradient #transform

Live preview Tooltips

Hologram Projection

Holographic projection tooltip with conic prismatic shimmer.

#hover #gradient #transform

Live preview Tooltips

Hologram Scanline

Holographic tooltip with animated horizontal scanline overlay.

#hover #animation #gradient

Live preview Tooltips

Hologram Shimmer

Holographic shimmer tooltip with a moving gradient overlay.

#hover #animation #gradient

Live preview Tooltips

Holographic

Holographic iridescent tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

Ice Frost

Icy frost blue tooltip with cool glow above the trigger.

#hover #gradient #transform

Live preview Tooltips

Iceberg Floating

Floating iceberg tooltip with cool cyan and white tones.

#hover #gradient #transform

Live preview Tooltips

Ink Blot

Ink blot texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Iridescent

Iridescent shimmering tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

July 4th Stars

American patriotic red-white-blue tooltip with stars.

#hover #gradient #transform

Live preview Tooltips

Lavender Dusk

Lavender dusk purple tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Leather Texture

Leather textured tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Line Pattern Background

Tooltip with a vertical line background pattern.

#hover #gradient #transform

Live preview Tooltips

Liquid Wave

Tooltip with a wavy liquid edge at the bottom.

#hover #gradient #transform

Live preview Tooltips

Marble Vein

Marble with veining tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Meadow Flower

Meadow flower tooltip with soft pastel color palette.

#hover #gradient #transform

Live preview Tooltips

Metal Brushed

Brushed metal texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Meteor Shower

Meteor shower tooltip with diagonal streak pattern.

#hover #gradient #transform

Live preview Tooltips

Meter Gauge

Meter gauge tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Midnight Plum

Dark midnight-plum tooltip with subtle violet highlights.

#hover #gradient #transform

Live preview Tooltips

Mint Fresh

Fresh mint tooltip with cool gradient above the trigger.

#hover #gradient #transform

Live preview Tooltips

Moon Crater

Moon surface tooltip with cratered texture decoration.

#hover #gradient #transform

Live preview Tooltips

Moonlight Night

Silvery moonlit night tooltip with subtle indigo glow.

#hover #gradient #transform

Live preview Tooltips

Mountain Peak

Mountain-peak tooltip with cool gray-blue stone tones.

#hover #gradient #transform

Live preview Tooltips

New Badge

NEW badge tooltip with sparkle above the trigger.

#hover #gradient #transform

Live preview Tooltips

New Year Firework

Firework burst tooltip celebrating the New Year.

#hover #gradient #transform

Live preview Tooltips

Ocean Tide

Ocean-tide tooltip with layered blue wave gradients.

#hover #gradient #transform

Live preview Tooltips

Oil Paint

Oil paint textured tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Old Letter

Aged parchment letter tooltip with cream paper texture.

#hover #gradient #transform

Live preview Tooltips

Onboarding

Onboarding tooltip with welcome message above the trigger.

#hover #gradient #transform

Live preview Tooltips

Opal Glow

Opal-like glowing tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Paper Recycled

Recycled paper texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Particle Float

Tooltip with floating particle dots scattered across its background.

#hover #gradient #transform

Live preview Tooltips

Particle Trail

Tooltip with a trailing line of particle dots leading to the trigger.

#hover #gradient #transform

Live preview Tooltips

Pearl Shimmer

Pearlescent shimmering tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

Planet Ring

Saturn-like planet tooltip with an elliptical ring around it.

#hover #gradient #transform

Live preview Tooltips

Prismatic

Prismatic light-split tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Product Card

Product preview card tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Purple Magic

Mystical purple tooltip with glow above the trigger.

#hover #gradient #transform

Live preview Tooltips

Spring Rain

Spring rain tooltip with soft blue-green color palette.

#hover #gradient #transform

Live preview Tooltips

Rainbow Arc

Bright rainbow arc gradient tooltip.

#hover #gradient #transform

Live preview Tooltips

Rainbow Shift

Rainbow gradient tooltip that shifts colors above the trigger.

#hover #animation #gradient

Live preview Tooltips

Ribbon Award

Award ribbon tooltip with notched ribbon shape.

#hover #gradient #transform

Live preview Tooltips

Rich Image

Tooltip with image preview above the trigger.

#hover #gradient #transform

Live preview Tooltips

River Flow

River-flow tooltip with shimmering teal wave pattern.

#hover #gradient #transform

Live preview Tooltips

Rocket Exhaust

Rocket exhaust tooltip with flame gradient bottom edge.

#hover #gradient #transform

Live preview Tooltips

Ruby Red

Ruby red gem tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Rust Iron

Industrial rust-iron tooltip with a weathered metal texture.

#hover #gradient #transform

Live preview Tooltips

Sale Flash

Sale flash tooltip with bold banner above the trigger.

#hover #animation #gradient

Live preview Tooltips

Sapphire Blue

Sapphire blue gem tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Scroll Parchment

Parchment scroll tooltip with rolled paper ends.

#hover #gradient #transform

Live preview Tooltips

Wax Seal

Tooltip styled like a wax seal stamp above the trigger.

#hover #gradient #transform

Live preview Tooltips

Shimmer Shine

Tooltip with shimmering shine sweep above the trigger.

#hover #animation #gradient

Live preview Tooltips

Shine Sweep Diagonal

Tooltip with a diagonal shine sweep overlay on hover.

#hover #gradient #transform

Live preview Tooltips

Shine Sweep Horizontal

Tooltip with a horizontal shine sweep overlay on hover.

#hover #gradient #transform

Live preview Tooltips

Skeleton Tip

Skeleton loading placeholder tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

Spaceship Launch

Spaceship launch tooltip with rocket-trail gradient.

#hover #gradient #transform

Live preview Tooltips

Spring Bloom

Soft pastel spring-bloom tooltip with floral hints.

#hover #gradient #transform

Live preview Tooltips

Static TV

Tooltip shows TV static before content above the trigger.

#hover #animation #gradient

Live preview Tooltips

Diagonal Stripe Background

Tooltip with diagonal candy-stripe background pattern.

#hover #gradient #transform

Live preview Tooltips

Horizontal Stripe Background

Tooltip with horizontal candy-stripe background pattern.

#hover #gradient #transform

Live preview Tooltips

Vertical Stripe Background

Tooltip with vertical candy-stripe background pattern.

#hover #gradient #transform

Live preview Tooltips

Summer Sun

Bright summer-sun tooltip with warm yellow glow.

#hover #gradient #transform

Effects tagged #gradient

Popular tags