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

Underline Draw

Tooltip with animated underline drawing above the trigger.

#hover #gradient #transform

Live preview Tooltips

User Card

User card tooltip with avatar and details above the trigger.

#hover #gradient #transform

Live preview Tooltips

Vaporwave Tip

Vaporwave pink-cyan gradient tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Violet Dream

Soft violet dreamy tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Volcano Erupt

Volcano-erupt tooltip with molten red-orange glow.

#hover #gradient #transform

Live preview Tooltips

Watercolor

Watercolor paint tooltip with soft edges above the trigger.

#hover #gradient #transform

Live preview Tooltips

Wave Pattern Background

Tooltip with a wavy background pattern.

#hover #gradient #transform

Live preview Tooltips

Winter Snowflake

Frosty winter-snowflake tooltip with cool blue tones.

#hover #gradient #transform

Live preview Tooltips

Wood Grain

Wood-grain texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Zigzag Pattern Background

Tooltip with a zigzag background pattern.

#hover #gradient #transform

Live preview Timelines

Arc Filmstrip Timeline

A sprocketed strip of film carries three chapters of a story arc and lifts the hovered frame.

#gradient #hover #film

Live preview Timelines

Aurora Parcel Tracker

Three parcel checkpoints share one horizontal rail and the live leg keeps flowing.

#tracking #animation #gradient

Live preview Timelines

Circuit Trace Timeline

Square pads hang off a board trace and a bright signal keeps travelling down it.

#circuit #animation #gradient

Live preview Timelines

Coil Reading Shelf

A reading list drawn as book spines where the read part of each title fills from below.

#writing-mode #gradient #progress

Live preview Timelines

Coral Mirror Timeline

The coral rail sits on the right edge so the whole sequence reads right to left.

#layout #gradient #list

Live preview Timelines

Forge Shift Board

Three crews claim their slots on a twenty four hour track and the night one wraps around.

#layout #schedule #gradient

Live preview Timelines

Frost Rail Timeline

A frosted vertical rail whose light drifts downward past three glowing event dots.

#gradient #animation #list

Live preview Timelines

Girder Scale Timeline

An I beam doubles as a ruler where minor notches run behind three labelled marks.

#gradient #ruler #layout

Live preview Timelines

Glide Daylight Timeline

A sky band runs from dawn to night while a warm sun disc glides and dips across it.

#gradient #animation #day-night

Live preview Timelines

Jade Roadmap Timeline

Three jade chevrons interlock into a roadmap strip labelled by quarter.

#clip-path #gradient #layout

Live preview Timelines

Lever Time Card

A punched card lists the week where each row stamps its own in and out arrows.

#gradient #list #punchcard

Live preview Timelines

Obsidian Duration Timeline

Every obsidian entry carries a violet bar whose offset and width show when it ran.

#layout #gradient #gantt

Live preview Timelines

Opal Progress Timeline

An opal fill climbs the rail on load and halts at the step still under way.

#animation #gradient #progress

Live preview Timelines

Pulse Vows Timeline

A clipped heartbeat silhouette beats above three milestones of one relationship.

#clip-path #animation #gradient

Live preview Timelines

Quartz Dashed Timeline

The dashed quartz rail slides downward between three rotated checkpoint squares.

#gradient #animation #background

Live preview Timelines

Rivet Assembly Steps

Numbered part codes hang off a rail whose domed rivet heads turn under the cursor.

#gradient #hover #steps

Live preview Timelines

Shaft Conveyor Stops

A belt keeps running over its rollers while three gate posts mark the packing stops.

#animation #gradient #conveyor

Live preview Timelines

Socket Energy Ledger

Hourly draw is spelled out in segmented meter cells that fill further at peak.

#gradient #meter #layout

Live preview Timelines

Topaz Gradient Timeline

A topaz to violet gradient runs down the rail and every dot borrows its local hue.

#gradient #shadow #list

Live preview Timelines

Turbine Service Windows

Running hours split into hatched service windows and the due one keeps drifting.

#gradient #animation #schedule

Live preview Timelines

Verge Lineage Timeline

Each generation doubles the row of small figures hanging off one descending family line.

#layout #gradient #family

Live preview Toggles

Acid Drip

Toxic green knob leaves a corrosive trail as it slides.

#gradient #transform #shadow

Live preview Toggles

Acorn Fall

Acorn knob tumbles from the oak tree across the autumn track.

#animation #gradient #transform

Live preview Toggles

Acrylic Clear

Transparent acrylic knob with sharp glossy edges.

#gradient #transform #shadow

Live preview Toggles

Agate Band

Banded agate with layered color stripes.

#gradient #transform #shadow

Live preview Toggles

Alexandrite Shift

Alexandrite color-shift from green to red-violet.

#gradient #transform #shadow

Live preview Toggles

Allegro / Adagio

Knob spins fast (allegro) or slow (adagio) on the emerald track.

#animation #gradient #transform

Live preview Toggles

AM / PM

Morning AM flips to evening PM with a sun arc.

#gradient #transform #shadow

Live preview Toggles

Amber Fossil

Amber fossil with trapped prehistoric inclusion.

#gradient #transform #shadow

Live preview Toggles

Amber Sun

Amber sun glow with radiant warm knob.

#gradient #transform #shadow

Live preview Toggles

Amber Veil

Soft amber veil with honey-tinted knob.

#gradient #transform #shadow

Live preview Toggles

Amethyst / Citrine

Purple amethyst knob shifts to a sunny citrine yellow.

#gradient #transform #shadow

Live preview Toggles

Amethyst Spark

Sparkling amethyst purple with crystal facet.

#gradient #transform #shadow

Live preview Toggles

Anodized Aluminum

Anodized aluminum with vibrant colored oxide layer.

#gradient #transform #shadow

Live preview Toggles

Aqua Bubble

Floating aqua bubble with iridescent rim glow.

#gradient #transform #shadow

Live preview Toggles

Arcade Coin

Retro arcade coin slot activates when the coin drops.

#gradient #transform #shadow

Live preview Toggles

Arrow Pierce

Sharp arrow knob pierces through the track when fired.

#gradient #transform #shadow

Live preview Toggles

Asteroid Spin

Rough asteroid knob tumbles through space when active.

#gradient #transform #shadow

Live preview Toggles

Aurora Borealis

Northern lights shimmer over an emerald knob.

#animation #gradient #transform

Live preview Toggles

Aurora Glow

Soft polar aurora glow swells behind the sliding knob.

#gradient #transform #shadow

Live preview Toggles

Aurora Shimmer

Soft aurora shimmer dances across the polar night.

#animation #gradient #transform

Live preview Toggles

Aurora Veil

Northern lights shimmer across the track as the glowing knob slides.

#animation #gradient #transform

Live preview Toggles

Autumn / Winter

Autumn leaf turns into a delicate winter snowflake.

#gradient #transform #shadow

Live preview Toggles

Azure Sky

Clear azure sky blue with drifting cloud knob.

#gradient #transform #shadow

Live preview Toggles

Bamboo Green

Fresh bamboo green stalk with light knob.

#gradient #transform #shadow

Live preview Toggles

Barricade Flip

Construction barricade flips from stop to go.

#gradient #transform #3d

Live preview Toggles

Bass / Treble

Equalizer knobs favor low bass or high treble.

#gradient #transform #shadow

Live preview Toggles

Begin / End

Gradient sweeps blue to purple as the knob slides with a subtle skew.

#gradient #transform #shadow

Live preview Toggles

Beryl Sea

Sea-green beryl gem with aqua clarity.

#gradient #transform #shadow

Live preview Toggles

Binary / Quantum

0/1 binary knob superposes into a quantum sphere on toggle.

#gradient #transform #shadow

Live preview Toggles

Black Hole

Light bends around the gravitational pull of a black hole.

#gradient #transform #shadow

Live preview Toggles

Bloodstone Dark

Dark green bloodstone with red speckles.

#gradient #transform #shadow

Live preview Toggles

Bolt Strike

Lightning bolt crackles across the track when struck.

#animation #gradient #transform

Live preview Toggles

Bolt Tighten

Hexagonal bolt rotates and tightens into place.

#gradient #transform #shadow

Live preview Toggles

Brass / Platinum

Yellow brass knob shifts to a cool platinum shine.

#gradient #transform #shadow

Live preview Toggles

Brocade Pattern

Ornate brocade jacquard pattern with golden threads.

#gradient #transform

Live preview Toggles

Bronze Age

Aged bronze patina with antique knob.

#gradient #transform #shadow

Live preview Toggles

Brushed Steel

Industrial brushed steel with directional grain lines.

#gradient #transform #shadow

Live preview Toggles

Bubble Pop

Glassy bubble knob pops to a larger size when activated.

#gradient #transform #shadow

Live preview Toggles

Bubble Rise

Air bubbles rise upward through the aquatic track.

#animation #gradient #transform

Live preview Toggles

Burgundy Rich

Deep burgundy wine with luxurious knob.

#gradient #transform #shadow

Live preview Toggles

Burnished Gold

Burnished gold surface with soft satin golden sheen.

#gradient #transform #shadow

Live preview Toggles

Big Red Button

Big red emergency button depresses when pressed.

#gradient #transform #shadow

Live preview Toggles

Cactus Bloom

Desert cactus sprouts a vibrant pink bloom when watered.

#gradient #transform

Live preview Toggles

Camera Shutter

Camera lens iris dilates open when the camera is enabled.

#gradient #border #transform

Live preview Toggles

Camouflage / Revealed

Camouflage-pattern track clears to reveal a bright knob.

#gradient #transform #shadow

Live preview Toggles

Candy Stripe Toggle

Playful candy-colored toggle with a striped knob and bouncy spring.

#gradient #shadow #border

Live preview Toggles

Canvas Weave

Heavy canvas weave with visible coarse threads.

#gradient #transform

Live preview Toggles

Canyon Echo

Canyon walls echo a sound wave across the desert track.

#gradient #transform

Live preview Toggles

Cassette Rewind

Cassette reels spin in reverse as the knob slides back.

#animation #gradient #transform

Live preview Toggles

Cat / Dog Morph

Knob slides between a cat face and a dog face with a soft pop morph.

#gradient #shadow #border

Live preview Toggles

Celadon Soft

Soft celadon green-grey with sage knob.

#gradient #transform #shadow

Live preview Toggles

Ceramic Glaze

Glossy ceramic glaze with reflective knob.

#gradient #transform #shadow

Live preview Toggles

Cerise Pop

Bright cerise cherry red popping knob.

#gradient #transform #shadow

Live preview Toggles

Charge / Discharge

Battery knob charges green and discharges red on toggle.

#gradient #transform #shadow

Live preview Toggles

Charred Wood

Charred shou sugi ban wood with deep burnt texture.

#gradient #transform

Live preview Toggles

Chartreuse Glow

Bright chartreuse neon glow toggle.

#gradient #transform #shadow

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 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 Sun

Citrine yellow with sun-warmed glow.

#gradient #transform #shadow

Live preview Toggles

Clamp Squeeze

Industrial clamp squeezes shut when activated.

#gradient #transform

Popular tags