#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

Cat Paw

Cat paw kneading rhythmically with paw beans showing.

#animation #gradient #transform

Live preview Loaders

Cathode Ray

Cathode ray tube beam sweeping across a phosphor screen.

#animation #gradient #shadow

Live preview Loaders

CD Spin

Compact disc spinning with rainbow light reflections.

#animation #gradient #transform

Live preview Loaders

Cello Bow

Cello being bowed across strings.

#animation #gradient #transform

Live preview Loaders

Chain Drive

Bicycle chain moving over sprockets.

#animation #gradient #transform

Live preview Loaders

Chalice Glow

Holy chalice with radiant glow.

#animation #gradient #shadow

Live preview Loaders

Champagne Cork Pop

Champagne cork popping with bubbles.

#animation #gradient #transform

Live preview Loaders

Chimney Smoke

Chimney puffing smoke rings.

#animation #gradient #transform

Live preview Loaders

Casino Chip Stack

Casino chips stacking up and sliding off in a loop.

#animation #gradient #transform

Live preview Loaders

Chocolate Drip

Chocolate dripping down.

#animation #gradient #transform

Live preview Loaders

Chronometer

Marine chronometer with rotating hands.

#animation #gradient #transform

Live preview Loaders

Cinema Reel

Cinema film reel spinning.

#animation #gradient #transform

Live preview Loaders

Circus Tent

Circus tent with stripe animation.

#animation #gradient

Live preview Loaders

Cirrus

Wispy cirrus clouds drifting.

#animation #gradient #transform

Live preview Loaders

Clamp Squeeze

C-clamp tightening around a wooden block.

#animation #gradient #transform

Live preview Loaders

Clarinet Reed

Clarinet reed vibrating.

#animation #gradient #transform

Live preview Loaders

Cloak Field

Cloaking field shimmering over object.

#animation #gradient #filter

Live preview Loaders

Clock Tower

Clock tower with moving hands.

#animation #gradient #transform

Live preview Loaders

Cloud Drift

Fluffy clouds drifting across a blue sky.

#animation #gradient #transform

Live preview Loaders

Cloud Rain

Cloud dropping rain droplets.

#animation #gradient

Live preview Loaders

Clover Spin

Four-leaf clover spinning to bring good luck.

#animation #gradient #transform

Live preview Loaders

Clown Nose

Clown nose with squeak bounce.

#animation #gradient #transform

Live preview Loaders

Cocktail Shaker

Bartender shaking a cocktail shaker vigorously.

#animation #gradient #transform

Live preview Loaders

Coffee Cup

Steaming coffee cup with vapor rising in wavy streams.

#animation #gradient #transform

Live preview Loaders

Coffee Grinder

Manual coffee grinder with crank turning and beans dropping.

#animation #gradient #transform

Live preview Loaders

Coffee Pour

Coffee pouring into cup.

#animation #gradient #transform

Live preview Loaders

Cog Mesh

Two cogs meshing together.

#animation #gradient #transform

Live preview Loaders

Coil Spring

Coil spring compressing and releasing.

#animation #gradient #transform

Live preview Loaders

Spinning Coin

A golden coin flipping end-over-end in 3D, catching the light.

#gradient #animation #3d

Live preview Loaders

Coin Insert

A coin sliding into an arcade slot and disappearing.

#animation #gradient #shadow

Live preview Loaders

Compass Needle

A red-and-black compass needle hunting for north on a stone dial.

#gradient #animation #border

Live preview Loaders

Compass Needle

Compass needle finding north.

#animation #gradient #transform

Live preview Loaders

Concert Light

Concert stage lights sweeping.

#animation #gradient #transform

Live preview Loaders

Conductor Baton

Conductor's baton waving.

#animation #gradient #transform

Live preview Loaders

Conga Drum

Conga drum with hand slapping.

#animation #gradient #transform

Live preview Loaders

Conic Progress Loader

A registered percentage property lets the conic sweep animate smoothly, not in steps.

#animation #gradient #shadow

Live preview Loaders

Conic Spin Disc

Conic gradient disc spinning.

#animation #gradient #transform

Live preview Loaders

Contrail

Airplane contrail dissipating.

#animation #gradient #filter

Live preview Loaders

Conveyor Belt

Factory conveyor belt moving boxes along rollers.

#animation #gradient #transform

Live preview Loaders

Coral Polyp

Coral polyps extending and retracting their tentacles.

#animation #gradient #transform

Live preview Loaders

Corkscrew

Corkscrew spiraling down into a wine bottle cork.

#animation #gradient #transform

Live preview Loaders

Coronal Mass Ejection

Sun emitting a coronal mass ejection loop.

#animation #gradient #transform

Live preview Loaders

Cosmic Ray

Cosmic ray streaking through space.

#animation #gradient

Live preview Loaders

Counter Click

Mechanical counter clicking up.

#animation #gradient

Live preview Loaders

Cow Bell Ring

Cowbell being struck and ringing.

#animation #gradient #transform

Live preview Loaders

Crepe Fold

Crepe being folded over.

#animation #gradient #transform

Live preview Loaders

Crest Emblem

Heraldic crest with shimmer.

#animation #gradient #transform

Live preview Loaders

Croissant Flake

Croissant with flaking layers.

#animation #gradient #transform

Live preview Loaders

Double Cross Rotate

Two cross shapes rotating opposite.

#animation #gradient #transform

Live preview Loaders

CRT Screen

Old CRT monitor with scanline flicker and static.

#animation #gradient #shadow

Live preview Loaders

Crystal Shard

Crystal shard with prismatic shimmer.

#animation #gradient #transform

Live preview Loaders

Crystal Sparkle

Crystal with sparkling highlights.

#animation #gradient #shadow

Live preview Loaders

Cumulonimbus

Towering cumulonimbus cloud.

#animation #gradient #transform

Live preview Loaders

Cumulus

Puffy cumulus clouds.

#animation #gradient #transform

Live preview Loaders

Cupcake Sprinkle

Cupcake with falling sprinkles.

#animation #gradient

Live preview Loaders

Curling Stone

Curling stone sliding on ice.

#animation #gradient #transform

Live preview Loaders

Curve Pulse Wave

Curved wave pulsing across.

#animation #gradient

Live preview Loaders

Cyclone Spin

Cyclone spiral spinning inward.

#animation #gradient #transform

Live preview Loaders

Cylinder Roll

Cylinder rolling horizontally.

#animation #gradient #transform

Live preview Loaders

Cymbal Crash

Crash cymbal wobbling after being struck.

#animation #gradient #transform

Live preview Loaders

Cymbal Rim Tap

Cymbal with rim vibration.

#animation #gradient #transform

Live preview Loaders

Cymbal Stack

Stacked cymbals with hi-hat motion.

#animation #gradient #transform

Live preview Loaders

Dandelion

Dandelion seeds blowing away one by one in the wind.

#animation #gradient #shadow

Live preview Loaders

Dark Matter

Invisible dark matter warping space.

#animation #gradient #transform

Live preview Loaders

Dartboard

Dartboard with a dart spinning around the bullseye.

#animation #gradient #transform

Live preview Loaders

Decagon Spin Wheel

Ten-sided wheel rotating.

#animation #gradient #transform

Live preview Loaders

Dew Drop

Dew drop forming and falling.

#animation #gradient

Live preview Loaders

Dial Tuner

Radio dial tuner sweeping.

#animation #gradient #transform

Live preview Loaders

Diamond Morph Flow

Diamond morphing with gradient flow.

#animation #gradient #transform

Live preview Loaders

Diamond Shine

Diamond with brilliant shine.

#animation #gradient #shadow

Live preview Loaders

Diamond Turn

Diamond shape turning on its tip.

#animation #gradient #transform

Live preview Loaders

Dice Roll

A six-sided die tumbling in 3D space.

#animation #gradient #transform

Live preview Loaders

Didgeridoo

Didgeridoo with vibrating buzz.

#animation #gradient #transform

Live preview Loaders

Differential

Differential gear mechanism.

#animation #gradient #transform

Live preview Loaders

Disc Roll Edge

Disc rolling along its edge.

#animation #gradient #transform

Live preview Loaders

Disco Ball

Disco ball with shimmering reflections.

#animation #gradient #transform

Live preview Loaders

Discus Spin

Discus spinning in thrower's hand.

#animation #gradient #transform

Live preview Loaders

DJ Table Spin

DJ turntable with spinning record.

#animation #gradient #transform

Live preview Loaders

Djembe Strike

African djembe drum being struck.

#animation #gradient #transform

Live preview Loaders

Dog Bone

Dog bone bouncing as if a dog is chewing it.

#animation #gradient #transform

Live preview Loaders

Dome Rib Rotate

Dome with ribs rotating.

#animation #gradient #transform

Live preview Loaders

Domino Fall

Dominoes falling in sequence.

#animation #gradient #transform

Live preview Loaders

Donut Glaze

Donut with glaze dripping.

#animation #gradient #transform

Live preview Loaders

Door Swing

Door swinging open and closed.

#animation #gradient #transform

Live preview Loaders

Downpour

Heavy downpour of thick raindrops.

#animation #gradient

Live preview Loaders

Drill Bit

Power drill bit spinning rapidly with motion blur.

#animation #gradient #transform

Live preview Loaders

Drop Tower

Free-fall drop tower rising slowly then plunging down.

#animation #gradient #border

Live preview Loaders

Dumbbell Curl

Dumbbell curling up and down.

#animation #gradient #transform

Live preview Loaders

Dust Devil

Mini dust devil whirlwind swirling dust in a column.

#animation #gradient #transform

Live preview Loaders

Dust Storm

Dust storm sweeping across.

#animation #gradient #transform

Live preview Loaders

Eclipse

Moon passing in front of sun eclipse.

#animation #gradient #shadow

Live preview Loaders

Egg Crack

Egg cracking open.

#animation #gradient #transform

Live preview Loaders

Elephant Trunk

Elephant trunk curling up and down to drink water.

#animation #gradient #transform

Live preview Loaders

Engine Piston

Engine piston moving up and down.

#animation #gradient

Live preview Loaders

Equalizer Bars

Audio equalizer bars bouncing.

#animation #gradient

Effects tagged #gradient

Popular tags