Most Popular CSS Effects (Page 99)

Live preview Tooltips

Terminal Output

Terminal output style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Terracotta Clay

Earthy terracotta tooltip with a textured clay feel.

#hover #gradient #transform

Live preview Tooltips

Thanksgiving Leaf

Autumn leaf-styled Thanksgiving tooltip.

#hover #gradient #transform

Live preview Tooltips

Thunder Electric

Electric thunder yellow tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Thunderstorm Night

Dark stormy night tooltip with electric lightning accent.

#hover #gradient #transform

Live preview Tooltips

Tick Marks Left

Tooltip with tick-mark decorations along its left edge.

#hover #gradient #transform

Live preview Tooltips

Tick Marks Right

Tooltip with tick-mark decorations along its right edge.

#hover #gradient #transform

Live preview Tooltips

Tick Marks Top

Tooltip with tick-mark decorations along its top edge.

#hover #gradient #transform

Live preview Tooltips

Ticket Stub

Tooltip styled like a raffle ticket stub above the trigger.

#hover #gradient #transform

Live preview Tooltips

Top Left Corner

Tooltip appears at the top-left corner of the trigger.

#hover #transform #border

Live preview Tooltips

Top Right Corner

Tooltip appears at the top-right corner of the trigger.

#hover #transform #border

Live preview Tooltips

Topaz Yellow

Topaz yellow gem tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Tour Popover

Tour-style popover tooltip with steps above the trigger.

#hover #transform #shadow

Live preview Tooltips

Toxic Waste

Toxic green ooze tooltip with neon glow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Turquoise Sea

Bright turquoise tooltip reminiscent of clear sea water.

#hover #transform #shadow

Live preview Tooltips

Typewriter Fast

Fast typewriter tooltip above the trigger.

#hover #animation #transform

Live preview Tooltips

Typewriter Top

Tooltip text types itself out character by character.

#hover #animation #transform

Live preview Tooltips

Typing Cursor

Tooltip text types out with a blinking cursor above the trigger.

#hover #animation #transform

Live preview Tooltips

Unblur Out

Tooltip starts sharp and unblurs to focus above the trigger.

#hover #transform #border

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

Version Tag

Version tag tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Vibrate Buzz

Tooltip that vibrates with a subtle buzz on hover.

#hover #animation #transform

Live preview Tooltips

Vintage Postage

Vintage postage stamp tooltip with perforated edges.

#hover #transform #shadow

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

Warning Banner

Warning banner tooltip with stripes above the trigger.

#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

Wave Tip

Tooltip that waves into view above the trigger.

#hover #animation #transform

Live preview Tooltips

Winter Snowflake

Frosty winter-snowflake tooltip with cool blue tones.

#hover #gradient #transform

Live preview Tooltips

Wobble Top

Tooltip wobbles side to side before settling above the trigger.

#hover #animation #transform

Live preview Tooltips

Wood Grain

Wood-grain texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Word Stagger

Tooltip words stagger into view above the trigger.

#hover #transform #border

Live preview Tooltips

Yellow Sticky

Yellow sticky note tooltip with shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Zigzag Pattern Background

Tooltip with a zigzag background pattern.

#hover #gradient #transform

Live preview Tooltips

Zoom Blur Combo

Tooltip that combines zoom-in with a blur-to-focus transition.

#hover #transform #border

Live preview Tooltips

Zoom In Bottom

Tooltip zooms in from small to full size below the trigger.

#hover #transform #border

Live preview Tooltips

Zoom In Left

Tooltip zooms in from small to full size on the left.

#hover #transform #border

Live preview Tooltips

Zoom In Top

Tooltip zooms in from far away above the trigger.

#hover #transform #border

Live preview Tooltips

Zoom On Hover

Tooltip that zooms larger on hover above the trigger.

#hover #animation #transform

Live preview Tooltips

Zoom Out Bottom

Tooltip zooms out from oversized to normal below the trigger.

#hover #transform #border

Live preview Tooltips

Zoom Out Left

Tooltip zooms out from oversized to normal on the left.

#hover #transform #border

Live preview Timelines

Amber Pulse Timeline

The step in progress throbs with an expanding amber halo while the rest stay dim.

#animation #shadow #list

Live preview Timelines

Anvil Event Log

Timestamped machine lines carry their own level chip and the error row keeps a caret blinking.

#animation #hover #log

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

Basalt Checked Timeline

Finished basalt steps fill in with a tick while the connector to the last one stays dashed.

#border #transition #list

Live preview Timelines

Bearing Fault History

Each fault entry carries a split race ring and the open one turns the whole row red.

#conic-gradient #list #status

Live preview Timelines

Bloom Seasons Timeline

A conic wheel splits the year into four seasons while a slow hand sweeps around it.

#conic-gradient #animation #grid

Live preview Timelines

Brass Zigzag Timeline

Cards alternate left and right of a brass rail, each pinned to it by a small stud.

#layout #hover #transform

Live preview Timelines

Caliper Calibration Log

Calibration entries pin the measured value between two caliper jaws with the drift beside.

#border #list #measure

Live preview Timelines

Canyon Checkout Steps

Cart to payment to confirmation, where a cleared step swaps its digit for a tick.

#checkout #steps #flexbox

Live preview Timelines

Cascade Contract Stages

Signed contract stages get a tilted double ring stamp, the open one stays dashed.

#stamp #border #list

Live preview Timelines

Chalk Minimal Timeline

A rail free chalk list marks each moment with a short tick that stretches on hover.

#hover #transition #minimal

Live preview Timelines

Chassis Order Stages

Every production stage sits inside a bracketed frame that lights up when hovered.

#border #hover #cards

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

Cobalt Arrow Timeline

Cobalt chevrons point from one stage down to the next in place of a solid rail.

#transform #border #list

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

Copper Badge Timeline

Every entry hangs off a copper pill badge that carries its month right on the rail.

#border #shadow #list

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

Cove Ledger Timeline

Money in and out over three dates, each row flagged by a small direction arrow.

#ledger #grid #finance

Live preview Timelines

Delta Hiring Pipeline

Hexagonal stage badges carry the funnel from applied down to a single offer.

#clip-path #hiring #list

Live preview Timelines

Dune Upload Stages

Upload stages carry their own percentage and the busy bar marches with stripes.

#upload #animation #progress

Live preview Timelines

Dynamo Backup History

Snapshot cylinders chain downward with dashed links and the full run leads the set.

#border #list #backup

Live preview Timelines

Echo Recall Timeline

Memories recede into the distance, shrinking and fading until a hover brings one back.

#hover #transition #minimal

Live preview Timelines

Ember Now Divider

Past entries sit dimmed above a glowing now divider while what is next stays lit.

#divider #animation #state

Live preview Timelines

Fjord Release History

Version tags with a notched left edge hang under every release headline.

#clip-path #release #list

Live preview Timelines

Flint Milestone Timeline

Two plain flint stops flank one milestone marked by a glowing rotated diamond.

#transform #animation #shadow

Live preview Timelines

Flux Funding Timeline

Soft moulded grooves carry a bead further along the track with every funding round.

#shadow #neumorphism #layout

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

Garnet Split Timeline

Dates sit left of the garnet rail and the matching notes line up on the right.

#grid #layout #border

Live preview Timelines

Gasket Quality Gates

Each checkpoint drops a needle onto its tolerance band and one lands outside the green.

#layout #tolerance #status

Live preview Timelines

Gear Chain Timeline

Toothed wheels turn in opposite directions and a bead chain links each stage.

#conic-gradient #animation #rotate

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

Glacier Chat Thread

Timestamped bubbles land one after another and the reply leans to the far side.

#chat #animation #bubble

Live preview Timelines

Gleam Tally Timeline

Volunteer hours counted in hand drawn tally marks, the newest month still catching light.

#animation #layout #tally

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

Browse by category

Popular tags