#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

Tornado Funnel

A narrowing stack of blue bands swaying like a spinning tornado.

#gradient #animation #border

Live preview Loaders

Tractor

Tractor with big rear wheels spinning across a field.

#animation #gradient #transform

Live preview Loaders

Tractor Beam

Tractor beam pulling object upward.

#animation #gradient #transform

Live preview Loaders

Traffic Light

Traffic signal cycling red, yellow, and green.

#animation #gradient #shadow

Live preview Loaders

Train Wheel

Steam locomotive wheel with piston rod driving back and forth.

#animation #gradient #transform

Live preview Loaders

Transmission Gear

Multi-speed transmission gears.

#animation #gradient #transform

Live preview Loaders

Treble Clef

Treble clef symbol shimmering.

#animation #gradient #shadow

Live preview Loaders

Tree Grow

Tree growing with leaves unfurling on its branches.

#animation #gradient #transform

Live preview Loaders

Dump Truck

Dump truck bed tilting to release its load.

#animation #gradient #transform

Live preview Loaders

Tug of War

Rope being pulled back and forth.

#animation #gradient #transform

Live preview Loaders

Tuning Fork Vibrate

Tuning fork vibrating at frequency.

#animation #gradient #transform

Live preview Loaders

Turbine Blade

Turbine blades spinning fast.

#animation #gradient #transform

Live preview Loaders

Steam Turbine

Steam turbine spinning fast.

#animation #gradient #transform

Live preview Loaders

Water Turbine

Water turbine with flowing water.

#animation #gradient #transform

Live preview Loaders

Turkey Feast

Roast turkey with steam.

#animation #gradient #transform

Live preview Loaders

Turtle Walk

Turtle slowly walking with shell bobbing and legs moving.

#animation #gradient #transform

Live preview Loaders

Twin Disc Shift

Twin discs shifting opposite directions.

#animation #gradient #transform

Live preview Loaders

Typhoon

Typhoon with spiral bands.

#animation #gradient #transform

Live preview Loaders

UFO Beam

UFO with tractor beam pulsing down.

#animation #gradient

Live preview Loaders

Ukulele Strum

Ukulele with strumming motion.

#animation #gradient #transform

Live preview Loaders

Valve Open

Valve opening and closing.

#animation #gradient #transform

Live preview Loaders

Vampire Coffin Rise

Vampire rising from coffin.

#animation #gradient #transform

Live preview Loaders

Vault Jump

Gymnast vaulting over horse.

#animation #gradient

Live preview Loaders

VHS Tape

VHS tape reels spinning behind a plastic window.

#animation #gradient #transform

Live preview Loaders

Vibraphone Spin

Vibraphone fans spinning above bars.

#animation #gradient #transform

Live preview Loaders

Vinyl Record

Vinyl record spinning under a tonearm needle.

#animation #gradient #transform

Live preview Loaders

Volcano Erupt

Volcano erupting with lava spewing and smoke rising.

#animation #gradient #transform

Live preview Loaders

Volleyball

Volleyball spinning with curved stripe pattern.

#animation #gradient #transform

Live preview Loaders

Wave Bars Loader

Five vertical bars rise and fall like an audio equalizer at even offsets.

#animation #gradient #transform

Live preview Loaders

Waffle Press

Waffle iron pressing.

#animation #gradient #transform

Live preview Loaders

Walkman

Walkman cassette player with a rotating tape reel inside.

#animation #gradient #transform

Live preview Loaders

Water Balloon

Water balloon wobbling.

#animation #gradient #transform

Live preview Loaders

Water Tower

Water tower with sloshing water.

#animation #gradient

Live preview Loaders

Waterfall

Water cascading down a cliff into a pool below.

#animation #gradient

Live preview Loaders

Waterspout

Waterspout rising from water surface.

#animation #gradient #transform

Live preview Loaders

Wave Bars

Six blue bars riding a sinusoidal wave up and down.

#gradient #animation #border

Live preview Loaders

Werewolf Howl

Werewolf howling at moon.

#animation #gradient #transform

Live preview Loaders

Wheel Spin

Wheel with spokes spinning.

#animation #gradient #transform

Live preview Loaders

White Dwarf

Dense white dwarf star shimmering.

#animation #gradient #transform

Live preview Loaders

Windmill Pinwheel

Four colored blades spinning around a central hub.

#gradient #animation #border

Live preview Loaders

Windmill Blade

Windmill with spinning blades.

#animation #gradient #transform

Live preview Loaders

Window Shutter

Window shutters opening and closing.

#animation #gradient #transform

Live preview Loaders

Windshield Wiper

Windshield wiper swiping back and forth across raindrops.

#animation #gradient #transform

Live preview Loaders

Witch Broom Fly

Witch flying on broomstick.

#animation #gradient #transform

Live preview Loaders

Wood Block Tap

Wood block being tapped.

#animation #gradient #transform

Live preview Loaders

Worm Gear

Worm screw driving a gear.

#animation #gradient #transform

Live preview Loaders

Wrench Turn

Wrench tightening a bolt with ratcheting motion.

#animation #gradient #transform

Live preview Loaders

Yo-Yo Spin

Yo-yo spinning on string.

#animation #gradient #transform

Live preview Loaders

Ziggurat Tier

Ziggurat with stacked tiers.

#animation #gradient #filter

Live preview Loaders

Zodiac Wheel

Zodiac wheel rotating with twelve symbols.

#animation #gradient #transform

Live preview Loaders

Zoom Burst Rays

Rays bursting outward from center.

#animation #gradient #transform

Live preview Marquees

Frost Ticker

A frosted glass strip carries one endless line of text with softly masked edges.

#marquee #mask #gradient

Live preview Marquees

Lever Heat Pipe

Heat travels along a pipe as a colour gradient while the sensor labels roll past.

#marquee #gradient #thermal

Live preview Marquees

Savanna Sheen Pass

A soft gradient highlight sweeps over the rail while the caption pulses in step.

#marquee #sheen #gradient

Live preview Marquees

Topaz Gradient Line

The moving caption is painted by a clipped gradient instead of a flat colour.

#marquee #gradient #background-clip

Live preview Navigation

Arrow Gradient Flow Navbar

Nav with gradient animated arrow indicators.

#hover #animation #gradient

Live preview Navigation

Aurora Background Navbar

Navbar with aurora-like animated gradient blobs.

#hover #animation #gradient

Live preview Navigation

Blurred Glass Navbar

Navbar with heavy backdrop blur and gradient border.

#hover #gradient #shadow

Live preview Navigation

Bob Buoyant Navbar

Links bob up and down buoyantly on hover.

#hover #animation #gradient

Live preview Navigation

Bordered Bottom Navbar

Navbar with thick gradient bottom border.

#hover #gradient #shadow

Live preview Navigation

Bordered Top Navbar

Navbar with thick gradient top border.

#hover #gradient #shadow

Live preview Navigation

Gradient Bottom Nav

Bottom nav with gradient active icon.

#hover #gradient #transform

Live preview Navigation

Color Ripple Hover Navbar

Color ripples outward from each link on hover with a radial gradient.

#hover #gradient #transform

Live preview Navigation

Coupon Clip Corner Nav

Nav items styled as coupons with clipped circular corners.

#hover #gradient #transform

Live preview Navigation

Filled Arrow Breadcrumbs

Breadcrumbs styled as filled arrow shapes.

#hover #gradient

Live preview Navigation

Arrow Flow Breadcrumbs

Breadcrumbs with arrow-shaped separators.

#hover #gradient

Live preview Navigation

Chevron Fill Breadcrumbs

Breadcrumbs with filled chevron-shaped items.

#hover #gradient

Live preview Navigation

Circle Background Breadcrumbs

Breadcrumbs with circular item backgrounds.

#hover #gradient #transform

Live preview Navigation

Dot Trail Breadcrumbs

Breadcrumbs with a trail of dots leading to active.

#hover #gradient

Live preview Navigation

Gradient Arrow Breadcrumbs

Breadcrumbs with gradient arrow separators.

#hover #animation #gradient

Live preview Navigation

Hover Rotate Breadcrumbs

Breadcrumbs that rotate slightly on hover.

#hover #gradient #transform

Live preview Navigation

Pentagon Shape Breadcrumbs

Breadcrumbs shaped as pentagons with point tips.

#hover #gradient

Live preview Navigation

Pill Active Breadcrumbs

Breadcrumbs with pill shape on active item.

#hover #gradient #shadow

Live preview Navigation

Pill Background Breadcrumbs

Breadcrumbs with pill-shaped items.

#hover #gradient #shadow

Live preview Navigation

Progress Line Breadcrumbs

Breadcrumbs with a connecting progress line.

#hover #gradient

Live preview Navigation

Curtain Fall Reveal Nav

Nav links revealed as a curtain falls downward on hover.

#hover #gradient #transform

Live preview Navigation

Curtain Rise Reveal Nav

Nav links revealed as a curtain rises upward on hover.

#hover #gradient #transform

Live preview Navigation

3D Dot Nav

3D extruded dot navigation.

#hover #gradient #transform

Live preview Navigation

Circle Dot Nav

Dot navigation in a circle container.

#hover #gradient #transform

Live preview Navigation

Floating Bottom Dot Nav

Floating dot navigation at bottom.

#hover #gradient #transform

Live preview Navigation

Floating Right Dot Nav

Floating dot navigation with shadow.

#hover #gradient #transform

Live preview Navigation

Gradient Dot Nav

Dot nav with gradient active dot.

#hover #gradient #transform

Live preview Navigation

Blur Overlay Drawer Navbar

Drawer over a frosted blurred backdrop.

#hover #animation #gradient

Live preview Navigation

3D Left Drawer Navbar

Left drawer with 3D perspective slide revealing main nav beside it.

#hover #animation #gradient

Live preview Navigation

3D Right Drawer Navbar

Right drawer with 3D perspective slide.

#hover #animation #gradient

Live preview Navigation

Floating Action Navbar

Navbar with floating action-style buttons.

#hover #gradient #transform

Live preview Navigation

Gradient Border Navbar

Navbar with animated gradient border around active link.

#hover #animation #gradient

Live preview Navigation

Holographic Navbar

Navbar with holographic gradient overlay.

#hover #animation #gradient

Live preview Navigation

Circle Icon Nav

Icon nav with circular icons.

#hover #gradient #transform

Live preview Navigation

Floating Icon Nav

Floating icon navigation with shadow.

#hover #gradient #transform

Live preview Navigation

Gradient Icon Nav

Icon nav with animated gradient background.

#hover #animation #gradient

Live preview Navigation

Horizontal Icon Nav

Horizontal icon-only navigation.

#hover #gradient #shadow

Popular tags