Most Popular CSS Effects (Page 100)

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

Halo Charter Timeline

Frosted glass milestones expand on click and the open one gains a soft blue halo.

#details #glassmorphism #shadow

Live preview Timelines

Harbor Social Feed

A thread line links round gradient avatars down an activity feed with ages on the right.

#feed #avatar #hover

Live preview Timelines

Ivory Clock Feed

An ivory activity feed stamps each row with a monospace clock chip and slides on hover.

#hover #transition #feed

Live preview Timelines

Jade Roadmap Timeline

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

#clip-path #gradient #layout

Live preview Timelines

Kiln Meter Readings

Monthly meter readings sit in digit cells and the newest one keeps rolling over.

#animation #digits #transform

Live preview Timelines

Kindle Streak Timeline

A habit streak drawn as interlocking chain links where the newest one keeps flickering warm.

#animation #border #habit

Live preview Timelines

Lapis Card Timeline

Each lapis entry opens into a compact card carrying a heading and a status chip.

#card #border #shadow

Live preview Timelines

Lattice Stack Timeline

Build layers pile up as sheared plates that widen as the assembly goes down.

#transform #hover #layers

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

Meadow Episode List

Podcast episodes stack in order and the one playing swaps its arrow for an equaliser.

#audio #animation #progress

Live preview Timelines

Mesa Year Bands

Year chips break the rail into bands so a long history stays readable.

#grouping #badge #list

Live preview Timelines

Monsoon Curved Timeline

Two wide elliptical arcs sweep between the nodes instead of a straight rail.

#curve #border-radius #layout

Live preview Timelines

Oasis Journey Route

Departure, transfer and arrival sit on a dotted route with a marker sliding across.

#route #animation #dashed

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

Onyx Ring Timeline

Hollow onyx rings mark every step and the running one spins a dashed halo.

#border #animation #list

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

Orbit Sprint Cycle

Four sprint ceremonies sit around a dashed ring while a bead keeps orbiting them.

#animation #layout #border

Live preview Timelines

Pearl Icon Timeline

Three pearl markers change shape along one rail: disc, diamond and arrow head.

#border #transform #shapes

Live preview Timelines

Prairie Stair Timeline

Cards step down and to the right, joined by small rounded elbow connectors.

#stairs #layout #border

Live preview Timelines

Pulse Vows Timeline

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

#clip-path #animation #gradient

Live preview Timelines

Pylon Floor Indicator

A lit car rides its shaft and stops beside each floor listed on the right.

#animation #transform #layout

Live preview Timelines

Quartz Dashed Timeline

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

#gradient #animation #background

Live preview Timelines

Quiver Level Timeline

Chunky pixel blocks track a learning path and the level in progress jitters one pixel at a time.

#animation #pixel #shadow

Live preview Timelines

Ratchet Line Steps

A pawl jumps from station to station along a toothed rail and never slides back.

#animation #transform #steps

Live preview Timelines

Ridge Day Agenda

An hour column runs down the left while the current slot keeps breathing.

#agenda #grid #animation

Live preview Timelines

Ripple Pledge Timeline

Each funding tier sends a thin arc rippling outward from the left edge of the row.

#animation #border #list

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

Ruby Numbered Timeline

Numbered ruby discs count the steps using a pure CSS counter, no markup digits.

#counter #border #list

Live preview Timelines

Savanna Gap Timeline

The space between two nodes grows with the wait, and the gap itself is labelled.

#spacing #duration #list

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

Summit Recipe Steps

Recipe stages hang off a beaded rail and each one states its own cooking time.

#recipe #radial-gradient #list

Live preview Timelines

Thicket Two Column Timeline

Two crews report on either side of a shared rail with the day marked in between.

#comparison #grid #layout

Live preview Timelines

Tide Expanding Strip

Three tide phases share one strip and the hovered phase widens to show its reading.

#hover #transition #flexbox

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

Tundra Syllabus Steps

Course units read done, in progress and locked through three different markers.

#course #conic-gradient #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

Valley Service Log

A maintenance ledger with banded rows, odometer readings and one job still due.

#log #grid #zebra

Live preview Timelines

Valve Stop Timeline

A standpipe carries flowing fluid past three handwheels and the last one is shut.

#animation #pipeline #border

Live preview Timelines

Vault Diploma Timeline

Certificates line up behind embossed wax seals and the one still pending loses its colour.

#conic-gradient #clip-path #filter

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 Timelines

Willow Start And Finish

A waving start flag opens the route and a chequered bar closes it at the end.

#flag #animation #conic-gradient

Live preview Timelines

Wisp Movements Timeline

Blurred colour washes drift and blend into one another above three dated art movements.

#blend-mode #filter #animation

Live preview Timelines

Zenith Ascent Timeline

Growth milestones climb a slope towards the summit where the final marker keeps flaring.

#clip-path #flexbox #animation

Live preview Timelines

Zinc Expanding Timeline

Hovering a zinc row unfolds a hidden detail line and swells its marker at once.

#hover #transition #reveal

Live preview Toggles

1P / 2P

Single-player mode becomes two-player co-op.

#transform #shadow

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

Acoustic / Electric

Acoustic guitar plugs in to become electric.

#transform #shadow

Live preview Toggles

Acoustic / Mute

Acoustic guitar knob becomes a mute speaker on the green track.

#transform #shadow

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

Airplane Mode

Signal bars disappear and an airplane swoops in when airplane mode is on.

#border #transform #rotate

Live preview Toggles

Alarm / Snooze

Shaking alarm clock settles into a snooze Z.

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

Allow / Block

Allow check knob becomes a block sign on the rose track.

#transform #shadow

Live preview Toggles

Ally / Enemy

Ally handshake knob becomes an enemy fist on toggle.

#transform #shadow

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

Anchor / Drift

Anchor knob morphs into a speedboat as the track lightens.

#transform #shadow

Live preview Toggles

Anodized Aluminum

Anodized aluminum with vibrant colored oxide layer.

#gradient #transform #shadow

Live preview Toggles

Anonymous / Named

Ghost knob becomes a name tag when identity is revealed.

#transform #shadow

Live preview Toggles

Apple / Banana

Round apple curves into a crescent banana.

#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

Armed / Disarmed

Shield arms red or disarms to neutral.

#transform #shadow

Live preview Toggles

Arpeggio / Chord

Three dots light up in sequence (arpeggio) or all at once (chord).

#transform #shadow

Live preview Toggles

Arrow Pierce

Sharp arrow knob pierces through the track when fired.

#gradient #transform #shadow

Live preview Toggles

Ascend / Descend

Knob enlarges and glides as the track warms from gray to amber.

#transform #shadow

Live preview Toggles

Ascend / Peak

Knob ascends diagonally to the peak on toggle.

#transform #shadow

Live preview Toggles

Asteroid Belt

Scattered rocks align into an orbiting belt.

#transform #shadow

Live preview Toggles

Asteroid Spin

Rough asteroid knob tumbles through space when active.

#gradient #transform #shadow

Live preview Toggles

Atom Spin

Electron orbits ignite around a nucleus.

#animation #transform #shadow

Live preview Toggles

Audio On / Off

Speaker emits sound waves or goes silent.

#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

Auth / Anonymous

Key auth knob becomes a ghost when anonymous on the indigo track.

#transform #shadow

Live preview Toggles

Autumn / Winter

Autumn leaf turns into a delicate winter snowflake.

#gradient #transform #shadow

Live preview Toggles

Available / Busy

Green available dot turns to an amber busy one.

#transform #shadow

Live preview Toggles

Azure Sky

Clear azure sky blue with drifting cloud knob.

#gradient #transform #shadow

Live preview Toggles

Backup / Restore

Backup disk knob becomes a restore recycle on the teal track.

#transform #shadow

Live preview Toggles

Badge / Clear

Notification badge count clears away to empty.

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

Basic / Expert

Single star upgrades to a triple-star expert rank.

#transform #shadow

Live preview Toggles

Bass / Snare Drum

Bass guitar knob becomes a snare drum on the indigo track.

#transform #shadow

Live preview Toggles

Bass / Treble

Equalizer knobs favor low bass or high treble.

#gradient #transform #shadow

Live preview Toggles

Battery Charge Level

Battery fill bar collapses to a low red sliver when off, full green when on.

#border #transform #switch

Most viewed effects

Browse by category

Popular tags