#gradient CSS effects

4,959 free, pure-CSS effects match the "gradient" tag. Each is copy-ready and needs no library or build step.

Live preview Toggles

Checker / Blank

Checkerboard pattern wipes to a clean blank slate.

#gradient #transform #shadow

Live preview Toggles

Chiffon Sheer

Sheer chiffon fabric flows translucently across the track.

#animation #gradient #transform

Live preview Toggles

Chrome Polish

Mirror chrome polish with highly reflective surface.

#gradient #transform #shadow

Live preview Toggles

Chrysoprase Green

Bright chrysoprase apple green with glow.

#gradient #transform #shadow

Live preview Toggles

Cinnabar Red

Ancient cinnabar red with carved stone knob.

#gradient #transform #shadow

Live preview Toggles

Cinnabar Stamp

Cinnabar red seal stamp with imprint knob.

#gradient #transform #shadow

Live preview Toggles

Circuit Flow

Current flows through circuit traces as the knob switches.

#gradient #transform #shadow

Live preview Toggles

Citrine Glow

Glowing citrine yellow with golden warmth.

#gradient #transform #shadow

Live preview Toggles

Citrine Sun

Citrine yellow with sun-warmed glow.

#gradient #transform #shadow

Live preview Toggles

Clamp Squeeze

Industrial clamp squeezes shut when activated.

#gradient #transform

Live preview Toggles

Clay / Bronze

Earthy clay knob polishes into a bronze sheen on toggle.

#gradient #transform #shadow

Live preview Toggles

Clear / Static

Antenna knob picks up static dots scattered across the track.

#gradient #transform #shadow

Live preview Toggles

Cloudy / Clear

Cloud drifts away to reveal a clear sunny sky.

#gradient #transform #shadow

Live preview Toggles

Cobalt Streak

Cobalt blue streak with lightning glow.

#animation #gradient #transform

Live preview Toggles

Cog Mesh

Two interlocking cogwheels rotate together when engaged.

#animation #gradient #transform

Live preview Toggles

Coins / Gems

Gold coin stash converts to sparkling gems.

#gradient #transform #shadow

Live preview Toggles

Color Burst Toggle

Toggling fires a radial color burst that ripples across the track.

#gradient #animation #shadow

Live preview Toggles

Comet Shoot

Distant star streaks across as a comet.

#gradient #transform #shadow

Live preview Toggles

Comet Streak

Bright comet streaks across the cosmic track leaving a tail.

#gradient #transform #shadow

Live preview Toggles

Comet Tail

Comet with trailing tail glides across the cosmic track.

#gradient #transform #shadow

Live preview Toggles

Conveyor Belt

Conveyor belt rolls packages across when active.

#animation #gradient #transform

Live preview Toggles

Copper Penny

Copper penny metal with warm penny knob.

#gradient #transform #shadow

Live preview Toggles

Coral Bay

Coral bay waters with tropical knob.

#gradient #transform #shadow

Live preview Toggles

Coral Blossom

Coral blossom pink with blooming gradient.

#gradient #transform #shadow

Live preview Toggles

Coral Pearl

Coral pink with pearlescent shimmer knob.

#gradient #transform #shadow

Live preview Toggles

Coral Pink

Soft coral pink with a glossy pearl knob.

#gradient #transform #shadow

Live preview Toggles

Coral Reef

Vibrant coral reef knob brings colorful reef life.

#gradient #transform #shadow

Live preview Toggles

Coral Reef Bloom

Vibrant coral reef with multi-color bloom.

#gradient #transform #shadow

Live preview Toggles

Coral Sunset

Warm coral to sunset orange fade toggle.

#gradient #transform #shadow

Live preview Toggles

CPU Load Meter

Animated bars visualize CPU load rising as the toggle activates.

#gradient #transform #shadow

Live preview Toggles

Cream Vanilla

Vanilla cream soft with buttery knob.

#gradient #transform #shadow

Live preview Toggles

Crescent Moon

Full moon morphs into a crescent against the night sky.

#gradient #transform #shadow

Live preview Toggles

Crimson Flame

Burning crimson flame with flickering glow.

#gradient #transform #shadow

Live preview Toggles

Crochet Loop

Hand-crocheted loop pattern with cozy yarn texture.

#gradient #transform

Live preview Toggles

CRT Screen

Vintage CRT screen flickers on with phosphor glow.

#animation #gradient #transform

Live preview Toggles

Crystal Shard

Sharp crystal shard with faceted edge.

#gradient #transform #shadow

Live preview Toggles

Cube Roll 3D

Sharp cube knob rolls end-over-end across the dark track in 3D.

#gradient #transform #shadow

Live preview Toggles

Cube / Sphere

Square cube knob rounds into a glossy sphere.

#gradient #transform #shadow

Live preview Toggles

Current / Eddy

Flowing current knob swirls into an eddy on toggle.

#gradient #transform #shadow

Live preview Toggles

Data Stream

Matrix-style data bits cascade behind the sliding knob.

#animation #gradient #transform

Live preview Toggles

Dawn / Dusk

Horizon glows pink at dawn and purple at dusk.

#gradient #transform #shadow

Live preview Toggles

Day / Night Morph

Sky transitions from day to night with a sun morphing into a moon and stars.

#gradient #shadow #border

Live preview Toggles

Denim Wear

Worn denim texture with stitching detail across the track.

#gradient #transform #shadow

Live preview Toggles

Dew Drop

Morning dew drop hangs from the leaf and falls when disturbed.

#gradient #transform #shadow

Live preview Toggles

Tuning Dial

Radio tuning dial rotates with frequency marks as it slides.

#gradient #transform #shadow

Live preview Toggles

Diamond Shine

Faceted diamond knob sparkles with brilliant reflections.

#animation #gradient #transform

Live preview Toggles

Digital / Analog

Pixel knob becomes an analog needle on the cyan track.

#gradient #transform #shadow

Live preview Toggles

Distort / Clean

Hue-rotate and contrast filter distort the knob visuals.

#gradient #transform #shadow

Live preview Toggles

Dolphin Leap

Dolphin arcs over the surface in a joyful leap.

#gradient #transform

Live preview Toggles

Open / Closed Door

Wooden door swings open on a hinge with a 3D perspective rotation.

#gradient #3d #border

Live preview Toggles

Dots / Stripes

Patterned track morphs from polka dots to stripes.

#gradient #transform #shadow

Live preview Toggles

Drift / Anchor

Wave emoji swaps to an anchor when the knob settles on the right.

#gradient #transform #shadow

Live preview Toggles

Droplet Fall

Teardrop-shaped knob rotates as it slides across a watery track.

#gradient #transform

Live preview Toggles

Ebony Night

Pure ebony black night with starlight knob.

#gradient #transform #shadow

Live preview Toggles

Eclipse Ring

Moon eclipses the sun with a glowing corona ring.

#gradient #transform #shadow

Live preview Toggles

Ember Fade

Glowing ember slowly dims to ash as the toggle turns off.

#gradient #transform #shadow

Live preview Toggles

Ember Glow

Smoldering ember knob pulses with a warm orange glow.

#animation #gradient #transform

Live preview Toggles

Emerald Pool

Emerald pool water with deep reflective knob.

#gradient #transform #shadow

Live preview Toggles

Emerald Spark

Emerald green track with sparkly facet knob.

#gradient #transform #shadow

Live preview Toggles

Emoji Mood Toggle

Sad face morphs into a happy face as the knob slides across the track.

#gradient #shadow #border

Live preview Toggles

Enamel Gloss

Glossy vitreous enamel with deep colored glass finish.

#gradient #transform #shadow

Live preview Toggles

Eye Open / Closed

An eyelid slides down to close the eye when toggled off, with pupil shift.

#gradient #border #transform

Live preview Toggles

Fan Blade

Cooling fan blades spin up to cool the system.

#animation #gradient #transform

Live preview Toggles

Faux Fur

Soft faux fur texture with subtle fuzz across the track.

#gradient #transform #shadow

Live preview Toggles

Feather / Plated

Soft feather knob hardens into chrome plating on toggle.

#gradient #transform #shadow

Live preview Toggles

Felt Press

Pressed felt material with smooth matte finish.

#gradient #transform #shadow

Live preview Toggles

Fern Unfurl

Curled fern frond unfurls gracefully across the track.

#gradient #transform

Live preview Toggles

Film Strip

Film strip advances frame-by-frame as the knob slides.

#animation #gradient #transform

Live preview Toggles

Fire / Ice Orb

Glowing orb slides across a dual-tone track, morphing from fire to ice.

#gradient #shadow #border

Live preview Toggles

Fish / Bird

Fish swims through water then takes flight as a bird.

#gradient #transform #shadow

Live preview Toggles

Flashlight Beam

A flashlight body glows and a yellow beam shoots downward when turned on.

#gradient #shadow #border

Live preview Toggles

Float / Sink

Knob bobs gently on a water-gradient track when floating.

#animation #gradient #transform

Live preview Toggles

Flower Bloom

Bud swells and blooms into a full flower.

#gradient #transform #shadow

Live preview Toggles

Focus Ring

Lens focus ring rotates with depth marks as it slides.

#gradient #transform #shadow

Live preview Toggles

Fog / Clear

Misty fog peels back to reveal a clear bright sky.

#gradient #transform #shadow

Live preview Toggles

Fog Roll

Thick fog rolls across the eerie track obscuring the knob.

#animation #gradient #transform

Live preview Toggles

Foil / Plain

Shiny foil knob becomes a plain matte circle on toggle.

#gradient #transform #shadow

Live preview Toggles

Frost Shard

Icy crystalline shard forms on the knob when frozen.

#animation #gradient #transform

Live preview Toggles

Frostbite Blue

Icy frostbite blue with frozen crystal knob.

#gradient #transform #shadow

Live preview Toggles

Fuchsia Bloom

Vivid fuchsia bloom with bright pink knob.

#gradient #transform #shadow

Live preview Toggles

Full / Empty

Vertical fill bar drains from full to empty as the knob drops.

#gradient #transform #shadow

Live preview Toggles

Fur / Scaled

Furry knob transforms into a scaled pattern on toggle.

#gradient #transform #shadow

Live preview Toggles

Galaxy Spin

Spiral galaxy core rotates with cosmic arms.

#animation #gradient #transform

Live preview Toggles

Galaxy Spiral

Spiral galaxy arms rotate as the cosmos spins up.

#animation #gradient #transform

Live preview Toggles

Garnet Deep

Deep garnet red with wine-dark intensity.

#gradient #transform #shadow

Live preview Toggles

Garnet / Zircon

Dark red garnet knob lightens to a sparkling zircon teal.

#gradient #transform #shadow

Live preview Toggles

Gear Shift

Cogwheel knob rotates and shifts along a notched metallic track.

#gradient #transform #shadow

Live preview Toggles

Geyser Spout

Geothermal geyser spouts water high into the air.

#gradient #transform #shadow

Live preview Toggles

Glacier Crack

Glacial ice cracks and shifts across the frozen track.

#gradient #transform

Live preview Toggles

Glass / Metal

Frosted glass knob turns to a brushed metal finish.

#gradient #transform #border

Live preview Toggles

Gold Leaf

Luxurious gold leaf with shimmering knob.

#gradient #transform #shadow

Live preview Toggles

Gold / Silver

Polished gold knob turns to a sleek silver metallic.

#gradient #transform #shadow

Live preview Toggles

Gradient Track Fill

Track fills with a sweeping gradient that follows the knob as it slides.

#gradient #shadow #border

Live preview Toggles

Gradient / Solid

Rainbow gradient track flattens to a single solid hue.

#gradient #transform #shadow

Live preview Toggles

Granite Speckled

Speckled granite stone with multi-color flecks.

#gradient #transform

Live preview Toggles

Graphite / Diamond

Dull graphite knob crystallizes into a sparkling diamond.

#gradient #transform #shadow

Popular tags