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

Hex Tile Spin

Hexagonal tile spinning with color shift.

#animation #gradient #transform

Live preview Loaders

Hexagon Spinner

A hexagon outlined with a rotating rainbow conic gradient.

#gradient #animation #transform

Live preview Loaders

Horse Gallop

Horse silhouette galloping with mane and tail flowing.

#animation #gradient #transform

Live preview Loaders

Hovercraft

Hovercraft floating on a cushion of air with skirt inflating.

#animation #gradient #transform

Live preview Loaders

Hydraulic Press

Hydraulic press crushing down.

#animation #gradient

Live preview Loaders

Hygrometer

Hygrometer showing humidity level.

#animation #gradient #transform

Live preview Loaders

Ice Cube Melt

Ice cube slowly melting into a puddle of water.

#animation #gradient #transform

Live preview Loaders

Jet Stream

High-altitude jet stream flowing.

#animation #gradient #transform

Live preview Loaders

Jewel Spark

Jewel with sparks emerging.

#animation #gradient #transform

Live preview Loaders

Joker Grin

Joker card with shifting grin.

#animation #gradient #transform

Live preview Loaders

Laser Beam

Laser beam pulsing with intensity.

#animation #gradient #shadow

Live preview Loaders

Lava Lamp

Orange blobs rising and morphing inside a warm yellow lava lamp.

#gradient #animation #shadow

Live preview Loaders

Leaf Fall

Autumn leaves drifting down with a swaying motion.

#animation #gradient #transform

Live preview Loaders

Line Connect Node

Lines drawing between two nodes.

#animation #gradient #transform

Live preview Loaders

Long Jump Leap

Long jumper arcing through sand.

#animation #gradient

Live preview Loaders

Magician Hat

Magician pulling rabbit from hat.

#animation #gradient #transform

Live preview Loaders

Match Strike

Match striking and igniting.

#animation #gradient #transform

Live preview Loaders

Merry-Go-Round

Rotating platform with three colored horses spinning around.

#animation #gradient #transform

Live preview Loaders

Metronome Tick

Metronome pendulum ticking.

#animation #gradient #transform

Live preview Loaders

New Year Ball Drop

New Year's Eve ball descending.

#animation #gradient #shadow

Live preview Loaders

Pan Flute

Pan flute pipes of varying lengths.

#animation #gradient #shadow

Live preview Loaders

Pearl Glow

Pearl with soft iridescent glow.

#animation #gradient #transform

Live preview Loaders

Pillar Column

Classical column with capital.

#animation #gradient #filter

Live preview Loaders

Pole Vault

Pole vaulter going over bar.

#animation #gradient #transform

Live preview Loaders

Heptagon Rotate

Seven-sided polygon rotating.

#animation #gradient #transform

Live preview Loaders

Popcorn Popper

Popcorn kernels popping.

#animation #gradient #transform

Live preview Loaders

Rolling Pin

Rolling pin spinning back and forth over dough.

#animation #gradient #transform

Live preview Loaders

Santa Sleigh Fly

Santa's sleigh flying across.

#animation #gradient #transform

Live preview Loaders

Satellite Dish

Satellite dish emitting signal waves.

#animation #gradient #transform

Live preview Loaders

Saxophone

Saxophone with keys pressing along its curved body.

#animation #gradient #transform

Live preview Loaders

Spacetime Warp

Spacetime grid warping under gravity.

#animation #gradient #shadow

Live preview Loaders

Spinning Top

A diamond-shaped top spinning fast while wobbling off-axis.

#gradient #animation #transform

Live preview Loaders

Spotlight Spin

Spotlight spinning in full circle.

#animation #gradient #transform

Live preview Loaders

Steel Drum

Steel drum with concave surface.

#animation #gradient #transform

Live preview Loaders

Stepper Motor

Stepper motor stepping in increments.

#animation #gradient #transform

Live preview Loaders

Tape Measure

Tape measure extending and retracting its yellow ribbon.

#animation #gradient #border

Live preview Loaders

Tempest

Violent tempest swirling.

#animation #gradient #transform

Live preview Loaders

Tomato Slice

Tomato slice with seed pattern.

#animation #gradient #transform

Live preview Loaders

Totem Rise

Tribal totem rising with eyes glowing.

#animation #gradient #filter

Live preview Loaders

Track Lane

Runner sprinting around an athletics track oval.

#animation #gradient #shadow

Live preview Loaders

Trampoline Bounce

A pink ball bouncing on a cyan trampoline surface that flexes on impact.

#gradient #animation #shadow

Live preview Loaders

Trumpet Valves

Trumpet with three piston valves pumping in rhythm.

#animation #gradient

Live preview Loaders

Gas Turbine

Gas turbine with flame inside.

#animation #gradient #transform

Live preview Loaders

Violin Bow

Violin bow drawing across strings back and forth.

#animation #gradient

Live preview Loaders

Water Clock

Ancient water clock filling.

#animation #gradient

Live preview Loaders

Wind Gust

Wind gust lines blowing.

#animation #gradient #transform

Live preview Loaders

Wine Pour

Wine pouring into glass.

#animation #gradient #transform

Live preview Loaders

Xylophone Mallet

Mallet striking xylophone bars.

#animation #gradient #transform

Live preview Loaders

Zombie Shuffle

Zombie shuffling across screen.

#animation #gradient #transform

Live preview Navigation

Hover Grow Breadcrumbs

Breadcrumbs that grow on hover.

#hover #gradient #transform

Live preview Navigation

Progress Bar Breadcrumbs

Breadcrumbs with a progress bar underneath.

#hover #gradient

Live preview Navigation

Triangle Tip Breadcrumbs

Breadcrumbs with triangle pointed tips.

#hover #gradient #transform

Live preview Navigation

Curtain Split Reveal Nav

Two curtains split apart horizontally to reveal the nav links.

#hover #gradient #transform

Live preview Navigation

Gradient Panel Drawer Navbar

Drawer with a gradient panel background and active indicator.

#hover #gradient #border

Live preview Navigation

Forest Green Navbar

Forest green navbar with earthy tones.

#hover #gradient #shadow

Live preview Navigation

Glass Tint Navbar

Glass navbar with colored tint overlay.

#hover #gradient #shadow

Live preview Navigation

Gradient Flow Navbar

Navbar with an animated gradient background flowing across links.

#hover #animation #gradient

Live preview Navigation

3D Icon Nav

3D extruded icon navigation.

#hover #gradient #transform

Live preview Navigation

Step Bar Fill Nav

Horizontal stepper where each segment fills a progress bar on hover.

#hover #gradient #transform

Live preview Navigation

Split Line Gradient Flow Navbar

Nav links separated by animated gradient line dividers.

#hover #animation #gradient

Live preview Navigation

Sticky Note Curl Nav

Nav items styled as sticky notes with curling corners on hover.

#hover #gradient #transform

Live preview Navigation

Pentagon Background Tabs

Tabs with polygon clip-path background morph.

#hover #gradient

Live preview Navigation

Flip Card Tabs

Tabs that flip like cards revealing back face.

#hover #gradient #transform

Live preview Navigation

Morph Triangle Tabs

Active tab morphs with triangle clip-path.

#hover #gradient

Live preview Navigation

Text Cinematic Glow Navbar

Active link has a wide cinematic soft-glow halo behind the text.

#hover #gradient #shadow

Live preview Navigation

3D Tilt Hover Navbar

Each link tilts in 3D space responding to hover with depth perspective.

#hover #gradient #transform

Live preview Navigation

Diagonal Wipe Reveal Nav

Diagonal wipe transitions across the nav when hovering different items.

#hover #gradient #transform

Live preview Navigation

Wipe Left Reveal Nav

Active tab revealed by a leftward wipe that sweeps across the nav.

#hover #gradient #transform

Live preview Progress

Amber Sheen Progress

A polished amber fill with a light sheen that sweeps across it on a loop.

#animation #transform #gradient

Live preview Progress

Anvil Stroke Progress

A piston head runs the bore back and forth while the charge ahead of it is compressed.

#piston #animation #transform

Live preview Progress

Bearing Heat Progress

A thermal band read from a cold to hot ramp with a glowing knob parked at the current reading.

#temperature #animation #gradient

Live preview Progress

Chassis Throughput Progress

A transfer rate panel that plots fourteen recent samples against a dashed average line.

#throughput #histogram #flexbox

Live preview Progress

Coral Comet Progress

The fill ends in a pulsing comet head that keeps glowing at the leading edge of the track.

#animation #transform #shadow

Live preview Progress

Tulle Wisp Progress

Seven motes of stardust lift off the filled span and fade away as they rise into the dark.

#stardust #particles #animation

Live preview Sliders

Bloom Vapor Slider

A striped sunset disc rises behind chrome lettering while a neon grid runs to the horizon.

#slider #vaporwave #gradient

Live preview Tabs

Brass Pill Tabs

A polished brass pill slides behind the labels while the panels cross fade.

#transform #gradient #transition

Live preview Tabs

Flint Sideline Tabs

A left hand rail marks the active row and the whole label steps inward.

#transform #gradient #layout

Live preview Tabs

Forge Numbered Tabs

Each tab carries a numbered disc that turns white hot when it is opened.

#gradient #animation #border

Live preview Tabs

Frost Underline Tabs

A frosted tab bar where a glowing underline glides beneath the active label.

#transform #gradient #shadow

Live preview Tabs

Lattice Unit Tabs

A unit switcher on a lattice grid where the reading flips over on each change.

#transform #gradient #typography

Live preview Tabs

Ridge Step Form Tabs

A three step wizard where diamond nodes light up and a dotted ridge links them.

#form #transform #gradient

Live preview Tabs

Spiral Halftone Tabs

A printed dot screen where the panel turns into place as the halftone rotates behind it.

#pattern #transform #gradient

Live preview Text

Ballet Grace

Graceful ballet pink on text.

#animation #gradient #transform

Live preview Text

Blueberry Blue

Deep blue blueberry on text.

#animation #gradient #shadow

Live preview Text

Blueprint Architect

Architect blueprint drawing.

#gradient

Live preview Text

Brick Mortar

Brick wall pattern text with mortar lines.

#gradient

Live preview Text

Bronze Aged

Aged bronze with patina hints.

#gradient

Live preview Text

Byzantine Mosaic

Byzantine gold mosaic on text.

#animation #gradient #filter

Live preview Text

Cadenza Solo

Virtuosic solo cadenza on text.

#animation #gradient #transform

Live preview Text

Cardboard Recycled

Recycled cardboard kraft paper.

#gradient #filter

Live preview Text

Carnival Mask

Mardi Gras carnival mask on text.

#animation #gradient #shadow

Live preview Text

Checker Diagonal

Diagonal checkerboard pattern.

#gradient

Live preview Text

Chrome Metallic

Polished chrome metallic text with bright reflection and dark base.

#gradient #shadow #filter

Live preview Text

Cinema Projector

Cinema projector beam glow.

#gradient #shadow #filter

Popular tags