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

Landing Pad Lights

A circular helipad perimeter lights up in yellow sequence.

#animation #gradient #transform

Live preview Backgrounds

Lissajous Curve

Lissajous curve figure traced by harmonic oscillation.

#animation #gradient #transform

Live preview Backgrounds

Marble Swirl

Elegant marble veins swirl in classic white and grey stone.

#animation #gradient #transform

Live preview Backgrounds

Masked Halftone

A dot matrix is masked with a gradient so the pattern fades out toward one corner.

#animation #gradient #mask

Live preview Backgrounds

Meteor Shower

Streaking meteors rain across a clear dark night sky.

#animation #gradient #transform

Live preview Backgrounds

Monsoon Rainforest

Tropical rainforest leaves drip under a warm monsoon downpour.

#animation #gradient #transform

Live preview Backgrounds

Monstera Leaf

Tropical monstera leaves with signature splits overlay a jungle backdrop.

#animation #gradient #transform

Live preview Backgrounds

Morning Glory

Vivid blue morning glory vines spiral upward opening to the sun.

#animation #gradient #transform

Live preview Backgrounds

Oil Slick

An oil slick shimmers with shifting rainbow interference colors.

#animation #gradient #transform

Live preview Backgrounds

Oil on Water

Oil slick spreads on water with shifting iridescent colors.

#animation #gradient #transform

Live preview Backgrounds

Paint Mixing

Thick layers of paint fold and mix together in slow motion.

#animation #gradient #transform

Live preview Backgrounds

Paint Splash

Vivid paint splashes burst and drip across a white canvas.

#animation #gradient #transform

Live preview Backgrounds

Paper Fibers

Cross-hatched repeating gradients build a warm paper grain with no image file.

#gradient #shadow #texture

Live preview Backgrounds

Plasma Arc

An electric plasma arc crackles between two points.

#animation #gradient #transform

Live preview Backgrounds

Plasma Torch

A bright blue plasma jet emits a thin column of superheated gas.

#animation #gradient #transform

Live preview Backgrounds

Orange Portal

Orange exit portal swirling with hot energy field.

#animation #gradient #transform

Live preview Backgrounds

Quasar Jet

A supermassive quasar fires a blazing relativistic jet into space.

#animation #gradient #transform

Live preview Backgrounds

Rave LED Pulse

Colorful LED panels pulse and strobe to the music beat.

#animation #gradient #shadow

Live preview Backgrounds

Retro Sunset

A striped retro sun sets behind an animated horizon line in classic 80s style.

#gradient #animation #3d

Live preview Backgrounds

Running Track Curve

A red running track with painted lane stripes curving to the finish.

#animation #gradient

Live preview Backgrounds

Sand Blast

Fine sand streams horizontally in a desert wind blast.

#animation #gradient

Live preview Backgrounds

CRT Scanlines

Retro CRT scanlines roll down an old monitor screen.

#animation #gradient

Live preview Backgrounds

Ski Slope Tracks

Curved ski tracks carve through fresh powder on a mountain slope.

#animation #gradient #transform

Live preview Backgrounds

City Smog

Yellow-brown city smog hangs heavy over an urban skyline.

#animation #gradient #transform

Live preview Backgrounds

Drifting Smoke

Dark smoky layers drift and curl across an ominous backdrop.

#gradient #animation #border

Live preview Backgrounds

Snow Drift

Snowflakes drift and accumulate into soft curves on the ground.

#animation #gradient #transform

Live preview Backgrounds

Gentle Snowfall

Soft white snowflakes drift down across a winter night sky.

#gradient #animation #border

Live preview Backgrounds

Spacetime Warp

Spacetime itself warps and ripples around an invisible mass.

#animation #gradient #transform

Live preview Backgrounds

Static Noise

TV static noise grain at full intensity.

#animation #gradient

Live preview Backgrounds

Steampunk Brass Gears

Brass steampunk gears meshing in continuous rotation.

#animation #gradient #transform

Live preview Backgrounds

Quantum Superposition

Waveform superposition blending two states simultaneously.

#animation #gradient #filter

Live preview Backgrounds

Synthwave Sun

Synthwave retro sun with horizontal cut lines over grid.

#animation #gradient #transform

Live preview Backgrounds

Terrazzo

Colorful terrazzo chips embedded in pale concrete.

#animation #gradient

Live preview Backgrounds

Toile de Jouy

Classic toile de Jouy pastoral scenes repeat in muted blue on cream.

#animation #gradient

Live preview Backgrounds

Traffic Lights

Traffic lights cycle through red yellow and green.

#animation #gradient #transform

Live preview Backgrounds

Triangle Wave

Triangle wave folding symmetric peaks across the panel.

#animation #gradient #shadow

Live preview Backgrounds

Trophy Shine

A golden trophy spins with a sparkle highlight.

#animation #gradient #transform

Live preview Backgrounds

Tunnel Vortex

Concentric tunnel rings pulling viewer into infinity.

#animation #gradient

Live preview Backgrounds

Twilight Blue

Deep twilight blue deepens toward night with early star pricks.

#animation #gradient

Live preview Backgrounds

Vernal Equinox

Balanced light and dark halves mark the spring equinox boundary.

#animation #gradient #transform

Live preview Backgrounds

Violin String Vibration

Bowed violin strings vibrate with a warm amber resonance.

#animation #gradient #transform

Live preview Backgrounds

Wetland Marsh

Calm marsh water reflects reeds and a soft overcast sky.

#animation #gradient #transform

Live preview Backgrounds

White Dwarf

A dense white dwarf star glows intensely in the dark of space.

#animation #gradient #transform

Live preview Backgrounds

Calm Wind

A barely perceptible breeze stirs a pale pastel sky.

#animation #gradient

Live preview Backgrounds

Cyclone

A rotating cyclone spiral of clouds spins over tropical waters.

#animation #gradient #transform

Live preview Backgrounds

Winter Glow

A soft warm winter glow lights snow against a cool sky.

#animation #gradient

Live preview Backgrounds

Winter Solstice

The longest night of the winter solstice under a starry sky.

#animation #gradient

Live preview Backgrounds

Moroccan Zellige

Vivid Moroccan zellige mosaic tiles in star pattern.

#animation #gradient #transform

Live preview Buttons

Abyss Depth

Bottomless abyss with descending blue gradient.

#hover #gradient #shadow

Live preview Buttons

Acorn Cap

Brown acorn with cap-textured top.

#hover #gradient #shadow

Live preview Buttons

Acorn Shell

Acorn-brown button with a glossy cap shell.

#hover #gradient #shadow

Live preview Buttons

Aerospace Panel

Industrial aerospace metal panel with rivets.

#hover #gradient #transform

Live preview Buttons

Almond Cream

Soft almond-cream with brown speckle.

#hover #gradient #transform

Live preview Buttons

Amber Haze

Golden amber button with a hazy outer glow.

#hover #gradient #transform

Live preview Buttons

Andromeda

Andromeda-galaxy button with spiral star arms.

#hover #gradient #transform

Live preview Buttons

Animated Stripe Button

Diagonal candy stripes that scroll continuously across the button.

#gradient #animation #hover

Live preview Buttons

Anodized Aluminum

Colorful anodized aluminum with smooth surface.

#hover #gradient #shadow

Live preview Buttons

Aquamarine Sea

Pale aquamarine sea-gem with clear facets.

#hover #gradient #transform

Live preview Buttons

Asteroid Belt

Asteroid-belt button with floating rock specks.

#hover #gradient #transform

Live preview Buttons

Auger

Auger-button with a helical screw spiral.

#hover #gradient #shadow

Live preview Buttons

Avocado Pit

Green avocado with brown pit center.

#hover #gradient #transform

Live preview Buttons

Axletree

Axletree-button with a heavy central iron shaft.

#hover #gradient #shadow

Live preview Buttons

Bark Strip

Tree-bark button with vertical striping.

#hover #gradient #shadow

Live preview Buttons

Beetle Shell

Iridescent beetle shell in green-purple.

#animation #gradient #shadow

Live preview Buttons

Black Hole

Black-hole button with an accretion disk rim.

#hover #gradient #transform

Live preview Buttons

Brickwork

Brickwork button with running-bond pattern.

#hover #gradient #shadow

Live preview Buttons

Cantaloupe Mesh

Orange cantaloupe with mesh-net pattern.

#hover #gradient #transform

Live preview Buttons

Cepheid

Cepheid-variable button that pulses rhythmically.

#hover #animation #gradient

Live preview Buttons

Chesapeake Bay

Brackish bay water teal-brown gradient.

#hover #gradient #shadow

Live preview Buttons

Citrus Squeeze

Bright citrus orange-lemon-lime gradient.

#hover #gradient #shadow

Live preview Buttons

Column Fluted

Fluted column button with vertical grooves.

#hover #gradient #shadow

Live preview Buttons

Copper Wash

Copper button with a brushed wash finish.

#hover #gradient #shadow

Live preview Buttons

Dahlia Bloom

Layered dahlia petals in deep magenta.

#hover #gradient #transform

Live preview Buttons

Disco Floor Button

Button with a flashing disco-tile background.

#hover #animation #gradient

Live preview Buttons

Flute Pillar Button

Tall slender button with vertical flute grooves.

#hover #gradient #transform

Live preview Buttons

Fuchsia Pop

Vivid fuchsia pink with bounce animation.

#hover #gradient #transform

Live preview Buttons

Galactic

Galactic-core button with swirling violet-blue.

#hover #animation #gradient

Live preview Buttons

Gibbous

Gibbous-moon button with a partial curved shadow.

#hover #gradient #transform

Live preview Buttons

Glacier Ice

Cracked glacier ice with blue depths.

#hover #gradient #transform

Live preview Buttons

Graphite Pencil

Dark graphite pencil-tip sheen.

#hover #gradient #shadow

Live preview Buttons

Grass Blade Button

Green button with grass blades growing on top.

#hover #gradient #border

Live preview Buttons

Gulf Stream

Gulf-stream button with a flowing blue current.

#hover #gradient #transform

Live preview Buttons

Honeydew Fresh

Pale honeydew melon green button.

#hover #gradient #transform

Live preview Buttons

Ship Hull Button

Navy button with riveted hull plates.

#hover #gradient #transform

Live preview Buttons

Jetty

Jetty-button with stone breakwater pattern.

#hover #gradient #shadow

Live preview Buttons

Laurel

Laurel-leaf button with a regal green crown.

#hover #gradient #transform

Live preview Buttons

Lilac Bloom

Soft lilac button blooming on hover.

#hover #gradient #transform

Live preview Buttons

Lintel

Stone-lintel button with a heavy horizontal beam.

#hover #gradient #shadow

Live preview Buttons

Moonlight Glow

Pale blue moon-kissed button with halo.

#hover #gradient #shadow

Live preview Buttons

Mortar

Mortar-joint button with thick gray seams.

#hover #gradient #shadow

Live preview Buttons

Obelisk

Tall obelisk button with a tapered pyramid top.

#hover #gradient #shadow

Live preview Buttons

Orchid Bloom

Orchid-purple button with a soft bloom glow.

#hover #gradient #transform

Live preview Buttons

Platinum Edge

Polished platinum button with sharp edge.

#hover #gradient #transform

Live preview Buttons

Quartz Spark

Crystalline quartz button that catches light.

#hover #gradient #shadow

Live preview Buttons

Shingle

Shingle-roof button with overlapping wood tiles.

#hover #gradient #shadow

Live preview Buttons

Spectral Veil

Ghostly translucent button with rainbow edge.

#animation #gradient #transform

Effects tagged #gradient

Popular tags