#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

Barbell Press

Barbell being pressed up.

#animation #gradient

Live preview Loaders

Baseball Pitch

Baseball stitching spinning as it flies past home plate.

#animation #gradient #transform

Live preview Loaders

Blender Blade

Blender jar with whirring blades at the bottom.

#animation #gradient #transform

Live preview Loaders

Caliper Measure

Digital caliper jaws opening and closing to measure.

#animation #gradient

Live preview Loaders

Camshaft

Camshaft with egg-shaped lobes.

#animation #gradient #transform

Live preview Loaders

Candle Clock

Candle burning down as time passes.

#animation #gradient #transform

Live preview Loaders

Candle Flame

Candle flame flickering.

#animation #gradient #transform

Live preview Loaders

Cannon Fire

Cannon with periodic fire burst.

#animation #gradient #transform

Live preview Loaders

Card Shuffle

Playing cards fanning out and shuffling back together.

#animation #gradient #transform

Live preview Loaders

Dynamo

Dynamo generating spark.

#animation #gradient #transform

Live preview Loaders

Ember Glow

Hot embers glowing intensely.

#animation #gradient #transform

Live preview Loaders

Fax Feed

Paper scrolling through a fax machine slot.

#animation #gradient #transform

Live preview Loaders

Flash Flood

Flash flood water rising rapidly.

#animation #gradient #border

Live preview Loaders

Flip Card

A gradient card flipping 180 degrees back and forth on its vertical axis.

#gradient #animation #3d

Live preview Loaders

Flute

Flute with finger keys pressing in a melody pattern.

#animation #gradient #transform

Live preview Loaders

Game Boy

Classic handheld Game Boy with a flickering screen.

#animation #gradient #transform

Live preview Loaders

Helicopter Blade

Helicopter rotor blades spinning above the cockpit.

#animation #gradient #transform

Live preview Loaders

Ice Cream Melt

Ice cream melting down cone.

#animation #gradient #transform

Live preview Loaders

Icicle Drip

Icicle dripping water droplets on a winter day.

#animation #gradient #transform

Live preview Loaders

Microwave Turntable

Microwave glass plate rotating with a glowing interior.

#animation #gradient #transform

Live preview Loaders

Morph Blob Loader

A gradient blob melts between organic border-radius shapes while it rotates.

#animation #gradient #transform

Live preview Loaders

Pilgrim Hat

Pilgrim hat with shiny buckle.

#animation #gradient #transform

Live preview Loaders

Popcorn Popper

Popcorn kernels popping.

#animation #gradient #transform

Live preview Loaders

Satellite Dish

Satellite dish emitting signal waves.

#animation #gradient #transform

Live preview Loaders

Sun Rays

Sun with rotating rays around a glowing yellow center.

#animation #gradient #transform

Live preview Loaders

Vinyl Scratch

DJ scratching vinyl record.

#animation #gradient #transform

Live preview Loaders

Welder Spark

Welding torch throwing bright sparks in bursts.

#animation #gradient #transform

Live preview Navigation

Blurred Glass Navbar

Navbar with heavy backdrop blur and gradient border.

#hover #gradient #shadow

Live preview Navigation

3D Arrow Breadcrumbs

Breadcrumbs with 3D arrow separators.

#hover #gradient #transform

Live preview Navigation

Dark Fade Overlay Navbar

Side panel nav with a fading dark overlay backdrop.

#hover #animation #gradient

Live preview Navigation

Aurora Gradient Overlay Navbar

Modal nav over an aurora gradient animated background.

#hover #animation #gradient

Live preview Navigation

Light Fade Overlay Navbar

Side panel nav with a fading light translucent backdrop.

#hover #animation #gradient

Live preview Navigation

Pentagon Background Tabs

Tabs with polygon clip-path background morph.

#hover #gradient

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

Gear Copy Progress

A copy dialog where a sheet keeps flying from the source folder into the destination folder.

#file-copy #animation #flexbox

Live preview Progress

Origami Cusp Progress

Eight paper facets alternate their crease direction and the five set folds carry the colour.

#origami #clip-path #flexbox

Live preview Sliders

Quartz Gradient Slider

A prismatic quartz rail runs the full spectrum under a bezelled white knob.

#slider #gradient #spectrum

Live preview Tabs

Cobalt Stepper Tabs

Numbered cobalt nodes on a rail, with the connecting line filling as you advance.

#transform #gradient #stepper

Live preview Text

Burlap Coarse

Coarse burlap fabric weave.

#gradient

Live preview Text

Cloud Cover Grey

Overcast grey cloud cover on text.

#animation #gradient #shadow

Live preview Text

Color Blocks Three

Three vertical color blocks.

#gradient

Live preview Text

Cosmic Nebula

Swirling nebula clouds of purple and pink within text.

#animation #gradient

Live preview Text

Grid Dots

Evenly-spaced dot grid in monochrome.

#gradient

Live preview Text

Glissando Slide

Sliding glissando pitch on text.

#animation #gradient #transform

Live preview Text

Jade Translucent

Translucent jade green stone.

#gradient #filter

Live preview Text

Manor Estate

Grand manor estate on text.

#animation #gradient #shadow

Live preview Text

Metallic Bronze

Aged bronze with deep brown metallic patina.

#gradient

Live preview Text

Palace Grand

Grand opulent palace gold on text.

#animation #gradient #shadow

Live preview Text

Petals Bloom

Flower petals bloom pattern.

#gradient

Live preview Text

Skyline Silhouette

Dark city skyline silhouette on text.

#animation #gradient #filter

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

#hover #gradient #transform

Live preview Tooltips

Emerald Tip

Emerald green tooltip with subtle shimmer above the trigger.

#hover #gradient #transform

Live preview Tooltips

Icon Crown

Tooltip with crown icon above the trigger.

#hover #gradient #transform

Live preview Tooltips

Overline Draw

Tooltip with animated overline drawing above the trigger.

#hover #gradient #transform

Live preview Tooltips

Retro 80s

Retro 80s neon sunset tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Rich Avatar

Tooltip with user avatar above the trigger.

#hover #gradient #transform

Live preview Tooltips

Shimmer Loading

Shimmer loading placeholder tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

Sky Blue Info

Sky blue tooltip with airy lightness above the trigger.

#hover #gradient #transform

Live preview Toggles

Burlap Rough

Rough burlap surface with rustic coarse fibers.

#gradient #transform

Live preview Toggles

Charcoal Matte

Matte charcoal black with no-shine knob.

#gradient #transform #shadow

Live preview Toggles

Cinnabar Red

Ancient cinnabar red with carved stone knob.

#gradient #transform #shadow

Live preview Toggles

Coins / Gems

Gold coin stash converts to sparkling gems.

#gradient #transform #shadow

Live preview Toggles

Dense / Sparse

Dense dot texture spreads out into a sparse pattern on toggle.

#gradient #transform #shadow

Live preview Toggles

Hematite Iron

Hematite iron-black with metallic sheen.

#gradient #transform #shadow

Live preview Toggles

Jelly Wobble

Soft jelly knob wobbles with a bouncy spring animation.

#animation #gradient #transform

Live preview Toggles

Marquee Bulb

Theater marquee bulbs chase in sequence when lit.

#animation #gradient #transform

Live preview Toggles

Staccato / Legato

Dotted track connects into a smooth legato line on toggle.

#gradient #transform #shadow

Live preview Toggles

Tornado Form

Tornado funnel cloud forms spinning across the track.

#animation #gradient #transform

Live preview Toggles

Tourmaline Stripe

Tourmaline watermelon stripe with pink-green knob.

#gradient #transform #shadow

Live preview Toggles

X-Ray Vision

Skeleton pattern reveals through the track when x-rayed.

#animation #gradient #transform

Live preview Toggles

Yarn Unwind

Knobby yarn ball rolls across leaving a thread behind.

#gradient #transform

Live preview Accordions

Marble Card Accordion

Card shaped rows that lift on hover and let the description rise into place.

#details #hover #shadow

Live preview Badges

Gold Medal Achievement

Gold medal achievement badge with shine effect.

#gradient #shadow #border

Live preview Badges

Trophy Achievement

Trophy-style achievement badge with golden shine.

#gradient #shadow #border

Live preview Badges

Candy Cane Badge

Candy-cane badge with diagonal red-white stripes.

#gradient #shadow #border

Live preview Badges

Cloud Fly Badge

Fly.io cloud badge with red-magenta fly styling.

#gradient #shadow #border

Live preview Badges

Cloud GCP Badge

Google Cloud Platform badge with four-color split styling.

#gradient #shadow #border

Live preview Badges

Cloud Heroku Badge

Heroku cloud badge with purple-paper plane styling.

#gradient #shadow #border

Live preview Badges

Debossed Badge

Debossed badge with inset text effect.

#gradient #shadow #border

Live preview Badges

Deco Fringe Badge

Badge with fringe-strip bottom edge.

#gradient #shadow

Live preview Badges

Deco Stitch Cross Badge

Badge with cross-stitch pattern border accent.

#gradient #shadow #border

Live preview Badges

Desert Sand Badge

Sandy beige badge with subtle dune texture.

#gradient #shadow #border

Live preview Badges

Doc Spreadsheet Badge

Spreadsheet badge with grid pattern and green tone.

#gradient #shadow #border

Live preview Badges

Eco Bio Badge

Biodegradable badge with sprout glyph and green tone.

#gradient #shadow #border

Live preview Badges

Eco Recycle Badge

Recycle badge with triangular recycle arrows.

#gradient #shadow #border

Live preview Badges

Eco Wind Badge

Wind-energy badge with cyan turbine styling.

#gradient #shadow #border

Live preview Badges

Embossed Badge

Embossed badge with raised text effect.

#gradient #shadow #border

Live preview Badges

Exclusive Gold Badge

Gold exclusive badge with metallic sheen.

#gradient #transform #shadow

Live preview Badges

Forest Moss Badge

Mossy-textured badge with earthy green gradient.

#gradient #border

Live preview Badges

Framework Angular Badge

Angular framework badge with shield-shape red styling.

#gradient #shadow #border

Live preview Badges

Framework Deno Badge

Deno framework badge with dark-blue dinosaur styling.

#gradient #shadow #border

Live preview Badges

Framework Next Badge

Next.js framework badge with mono black-white styling.

#gradient #shadow #border

Live preview Badges

Framework React Badge

React framework badge with atom-orbit styling.

#gradient #shadow #border

Effects tagged #gradient

Popular tags