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

Jellyfish Glow

Bioluminescent jellyfish knob pulses softly in the deep.

#animation #gradient #transform

Live preview Toggles

Jungle Leaf

Lush leaf unfurls across the verdant track.

#gradient #transform #shadow

Live preview Toggles

Kaleido Spin

Kaleidoscopic conic gradient knob spins while hues cycle.

#animation #gradient #transform

Live preview Toggles

Knit Stitch

Cozy knit stitch pattern with visible V-shape rows.

#gradient #transform

Live preview Toggles

Knot Tie

Rope knot tightens as the knob pulls across the track.

#gradient #transform #shadow

Live preview Toggles

Lace Trim

Delicate lace trim pattern along the elegant track.

#gradient #transform

Live preview Toggles

Lantern Glow

Paper lantern knob warms with a soft amber glow when lit.

#gradient #transform #shadow

Live preview Toggles

Latch Clip

Mechanical latch clicks open and snaps closed.

#gradient #transform #shadow

Live preview Toggles

Latex Shine

Glossy latex surface with high-shine reflective finish.

#gradient #transform #shadow

Live preview Toggles

Launch / Land

Rocket knob lifts off vertically with sky-to-space track gradient swap.

#gradient #transform #shadow

Live preview Toggles

Lava Flow

Molten lava texture flows across the track with a hot ember knob.

#animation #gradient #transform

Live preview Toggles

Lavender Mist

Dreamy lavender gradient with soft purple glow.

#gradient #transform #shadow

Live preview Toggles

Leaf Fall

Green leaf detaches and drifts down autumn-orange.

#gradient #transform #shadow

Live preview Toggles

Leather Grain

Premium full-grain leather texture with rich patina.

#gradient #transform #shadow

Live preview Toggles

Leather / Suede

Glossy leather knob softens to matte suede on toggle.

#gradient #transform #shadow

Live preview Toggles

Lever Pull

Industrial lever pulls down to engage the mechanism.

#gradient #transform #shadow

Live preview Toggles

Light / Dark Mode

Sun gives way to a crescent moon for dark mode.

#gradient #transform #shadow

Live preview Toggles

Lightbulb On / Off

A lightbulb that flickers to life with a warm glow and radiating rays when toggled on.

#gradient #glass #shadow

Live preview Toggles

Lightning Strike

Lightning bolt strikes from cloud to ground when active.

#animation #gradient #transform

Live preview Toggles

Linen Weave

Natural linen weave texture with crosshatch pattern.

#gradient #transform

Live preview Toggles

Magenta Pulse

Pulsing magenta glow around a hot pink knob.

#animation #gradient #transform

Live preview Toggles

Magnetic Knob Toggle

Knob snaps across with a magnetic overshoot and attraction glow.

#gradient #shadow #border

Live preview Toggles

Mahogany Rich

Rich mahogany wood with deep brown knob.

#gradient #transform #shadow

Live preview Toggles

Maple Leaf

Maple leaf knob shifts from green to autumn red.

#gradient #transform

Live preview Toggles

Marble / Granite

Veined marble knob shifts to a speckled granite pattern.

#gradient #transform #shadow

Live preview Toggles

Marble Statue

White marble statue with classic veining.

#gradient #transform #shadow

Live preview Toggles

Marble Veined

White marble with elegant grey veining pattern.

#gradient #transform

Live preview Toggles

Matte / Glossy

Matte knob gains a glossy highlight reflection on toggle.

#gradient #transform #shadow

Live preview Toggles

Mauve Dusk

Mauve dusty purple with twilight knob.

#gradient #transform #shadow

Live preview Toggles

Mech Shift

Mechanical panels shift and realign when transforming.

#gradient #transform #shadow

Live preview Toggles

Mercury Bubble

Liquid mercury silver with floating bubble knob.

#gradient #transform #shadow

Live preview Toggles

Mesh Grid

Sport mesh fabric with breathable grid pattern.

#gradient #transform

Live preview Toggles

Metallic / Pearl

Metallic knob shifts to a soft pearlescent sheen on toggle.

#gradient #transform #shadow

Live preview Toggles

Meteor Burst

Meteor impact bursts with sparks and debris when struck.

#gradient #transform #shadow

Live preview Toggles

Meteor Shower

Meteors streak across the night sky when active.

#animation #gradient #transform

Live preview Toggles

Metronome Tick

Metronome arm ticks back and forth keeping the beat.

#animation #gradient #transform

Live preview Toggles

Midnight Bloom

Midnight blue track with blooming star knob.

#gradient #transform #shadow

Live preview Toggles

Mirror / Flip

Knob mirrors itself with a horizontal flip.

#gradient #transform #shadow

Live preview Toggles

Mirror Shine

Polished chrome knob slides with a sweeping reflection.

#animation #gradient #transform

Live preview Toggles

Mist Clear

Atmospheric mist clears to reveal what was hidden.

#gradient #transform #filter

Live preview Toggles

Modem Dial

Vintage rotary modem dial spins to connect.

#gradient #transform #shadow

Live preview Toggles

Moon Crater

Cratered moon surface knob shifts in the lunar sky.

#gradient #transform

Live preview Toggles

Moonstone Glow

Moonstone with soft adularescent sheen.

#gradient #transform #shadow

Live preview Toggles

Morning / Evening

Rooster crows at dawn, owl hoots at dusk.

#gradient #transform #shadow

Live preview Toggles

Mosaic Tile

Pixelated mosaic tiles shift colors across the track.

#gradient #transform

Live preview Toggles

Mountain / Valley

Peak rises high then dips down into a green valley.

#gradient #transform #shadow

Live preview Toggles

Mushroom Grow

Mushroom sprouts from the ground when conditions are right.

#gradient #transform

Live preview Toggles

Nebula Cloud

Cosmic nebula cloud swirls with pink and purple hues.

#gradient #transform #shadow

Live preview Toggles

Needle Gauge

Pressure gauge needle swings to green zone when active.

#gradient #transform

Live preview Toggles

Needle Spin

Compass needle knob spins to point a different direction.

#gradient #transform #shadow

Live preview Toggles

Neon Plasma Switch

Dark cyberpunk switch with a glowing neon knob and electric arc effect.

#gradient #glow #shadow

Live preview Toggles

Neoprene Flex

Stretchy neoprene material with subtle flex animation.

#animation #gradient #transform

Live preview Toggles

Noise / Clean

Grainy noise track clears into a clean surface.

#gradient #transform #shadow

Live preview Toggles

North / South

Compass needle swings between north and south.

#gradient #transform #shadow

Live preview Toggles

Nova Burst

Stellar burst radiates from the knob as the nova ignites.

#gradient #transform #shadow

Live preview Toggles

Ocean / Beach

Deep ocean waves roll into a sunny beach scene.

#gradient #transform #shadow

Live preview Toggles

Oil Slick

Iridescent oil-slick shimmer across a dark puddle track.

#animation #gradient #transform

Live preview Toggles

Onyx Shadow

Black onyx stone with mysterious shadow.

#gradient #transform #shadow

Live preview Toggles

Opal Fire

Fiery opal with multi-color flash.

#gradient #transform #shadow

Live preview Toggles

Opal / Jadeite

Multicolor opal knob focuses into a deep jadeite green.

#gradient #transform #shadow

Live preview Toggles

Orbit / Gravity

Floating knob gets captured into a gravity orbit.

#animation #gradient #transform

Live preview Toggles

Orbit / Station

Orbiting moon knob docks at a station on toggle.

#animation #gradient #transform

Live preview Toggles

Orbital Ring

Satellite orbits a planetary knob as it slides across.

#animation #gradient #transform

Live preview Toggles

Orchid Bloom

Orchid purple-pink bloom with petal knob.

#gradient #transform #shadow

Live preview Toggles

Organza Crisp

Crisp organza fabric with a subtle iridescent shimmer.

#animation #gradient #transform

Live preview Toggles

Oxidized Copper

Copper surface oxidizing to verdigris patina green.

#gradient #transform

Live preview Toggles

Patina Iron

Aged iron with rustic patina and weathered texture.

#gradient #transform #shadow

Live preview Toggles

Pearl Dew

Pearl morning dew with translucent sheen.

#gradient #transform #shadow

Live preview Toggles

Pearl Glow

Luminous pearl white with iridescent sheen.

#gradient #transform #shadow

Live preview Toggles

Pearl / Onyx

Iridescent pearl knob darkens to a glossy onyx black.

#gradient #transform #shadow

Live preview Toggles

Pearlescent Shine

Pearlescent surface with soft lustrous pearl sheen.

#animation #gradient #transform

Live preview Toggles

Pendulum Swing

Grandfather clock pendulum swings rhythmically across.

#animation #gradient #transform

Live preview Toggles

Periwinkle Dawn

Soft periwinkle dawn with sky-blue knob.

#gradient #transform #shadow

Live preview Toggles

Persimmon Warm

Warm persimmon orange with autumn glow.

#gradient #transform #shadow

Live preview Toggles

Petal Fall

Sakura petal drifts down across the spring track.

#animation #gradient #transform

Live preview Toggles

Pewter Bloom

Pewter grey with subtle bloom glow.

#gradient #transform #shadow

Live preview Toggles

Pewter Mist

Misty pewter grey with subtle haze knob.

#gradient #transform #shadow

Live preview Toggles

Pewter Shade

Muted pewter grey with metallic knob.

#gradient #transform #shadow

Live preview Toggles

Pine Cone

Woody pine cone knob scales open when dried.

#gradient #transform

Live preview Toggles

Piston Pump

Hydraulic piston pumps up and down with mechanical rhythm.

#animation #gradient #transform

Live preview Toggles

Pitch / Flat

Knob moves vertically up for high pitch and levels flat on toggle.

#gradient #transform #shadow

Live preview Toggles

Planet Ring

Ringed planet knob orbits with its ring tilted in space.

#gradient #transform #shadow

Live preview Toggles

Platinum Edge

Polished platinum with sharp edge knob.

#gradient #transform #shadow

Live preview Toggles

Polished Brass

Mirror-polished brass with warm golden reflective glow.

#animation #gradient #transform

Live preview Toggles

Porcelain Doll

Delicate porcelain white with smooth glossy knob.

#gradient #transform #shadow

Live preview Toggles

Porcelain Smooth

Glossy porcelain with smooth translucent glaze.

#gradient #transform #shadow

Live preview Toggles

Powder Coat

Durable powder-coated surface with matte finish.

#gradient #transform #shadow

Live preview Toggles

Power Button Toggle

Circular power symbol that lights up with a pulsing ring when active.

#gradient #animation #shadow

Live preview Toggles

Power Surge

Lightning power surge crackles around the active knob.

#animation #gradient #transform

Live preview Toggles

Power Switch Toggle

A round power button that lights up and hums with a soft ring when switched on.

#animation #gradient #shadow

Live preview Toggles

Prism Shine

Prism knob refracts incoming light into a rainbow beam.

#gradient #transform #shadow

Live preview Toggles

Property Glow Toggle

Turning it on starts a registered angle animating, spinning a conic glow behind the track.

#animation #gradient #filter

Live preview Toggles

Pulsar Beam

Pulsar star emits rotating beams of radiation.

#animation #gradient #transform

Live preview Toggles

Pyrite Gold

Fool's gold pyrite with cubic shine.

#gradient #transform #shadow

Live preview Toggles

Quantum Spin

Particle-like knob spins on its axis while transitioning states.

#animation #gradient #transform

Live preview Toggles

Quartz / Obsidian

Clear quartz knob darkens into black obsidian glass.

#gradient #transform #shadow

Popular tags