Most Popular CSS Effects (Page 20)

Live preview Tooltips

Error Stack

Error stack trace style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Fade Right

Tooltip fades in on the right side pointing left.

#hover #transform #border

Live preview Tooltips

Fan Out Tip

Tooltip that fans out from a point above the trigger.

#hover #transform #border

Live preview Tooltips

Feature Card

Feature highlight card tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Flash Strobe

Tooltip that flashes with a strobe-like opacity animation.

#hover #animation #transform

Live preview Tooltips

Flip X Left

3D flip tooltip on X axis revealing from the left.

#hover #transform #border

Live preview Tooltips

Flip X Right

3D flip tooltip on X axis revealing from the right.

#hover #transform #border

Live preview Tooltips

Glass Frost Cold

Cool-toned frosted glass tooltip with cold blue tint.

#hover #transform #shadow

Live preview Tooltips

Glass Iridescent

Iridescent glass tooltip with a rainbow shimmer overlay.

#hover #gradient #transform

Live preview Tooltips

Green Success

Green success tooltip with checkmark styling above the trigger.

#hover #transform #shadow

Live preview Tooltips

Groove Border Top

Tooltip with a 3D grooved border above the trigger.

#hover #transform #border

Live preview Tooltips

Icon Help

Tooltip with question mark icon above the trigger.

#hover #transform #border

Live preview Tooltips

Inset Border Top

Tooltip with an inset 3D border above the trigger.

#hover #transform #border

Live preview Tooltips

Liquid Ripple

Tooltip that ripples outward like a water drop impact.

#hover #transform #border

Live preview Tooltips

Milestone

Milestone tag tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Mojito Mint

Fresh mojito mint tooltip with lime accent above the trigger.

#hover #gradient #transform

Live preview Tooltips

Mustard Field

Rich mustard yellow tooltip with a vintage field feel.

#hover #transform #border

Live preview Tooltips

Neumorphic Top

Soft neumorphic tooltip with inset shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Obsidian Black

Obsidian black glassy tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Ocean Wave

Ocean blue gradient tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

OKLCH Tone Tooltip

Bubble, arrow and trigger colours are all mixed from one OKLCH hue in OKLAB.

#hover #transform #shadow

Live preview Tooltips

Olive Military

Olive-drab military-styled tooltip with stencil feel.

#hover #transform #border

Live preview Tooltips

Orbit Circles

Tooltip with orbiting circles decoration above the trigger.

#hover #animation #transform

Live preview Tooltips

Pastel Soft

Soft pastel tooltip with gentle colors above the trigger.

#hover #transform #shadow

Live preview Tooltips

Pearl White

Pearl white shimmering tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Pencil Sketch

Pencil sketch style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Pink Bubble

Pink bubble tooltip with rounded corners above the trigger.

#hover #transform #shadow

Live preview Tooltips

Powder Sky

Soft powder-blue tooltip reminiscent of a clear sky.

#hover #transform #shadow

Live preview Tooltips

Progress Bar

Tooltip with animated progress bar above the trigger.

#hover #gradient #transform

Live preview Tooltips

Progress Circular

Tooltip with circular progress indicator above the trigger.

#hover #animation #transform

Live preview Tooltips

Progress Ring

Circular progress ring tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Pulse Throb

Tooltip that throbs with a gentle pulse animation on hover.

#hover #animation #transform

Live preview Tooltips

Rich Content

Tooltip with rich multi-line content above the trigger.

#hover #transform #shadow

Live preview Tooltips

Ridge Border Bottom

Tooltip with a 3D ridged border below the trigger.

#hover #transform #border

Live preview Tooltips

Robot Circuit

Robot circuit tooltip with PCB-style green-and-cyan grid.

#hover #gradient #transform

Live preview Tooltips

Rotate Left

Tooltip rotates in from the left with a spin animation.

#hover #transform #border

Live preview Tooltips

Rotate In Top

Tooltip rotates into place above the trigger.

#hover #transform #border

Live preview Tooltips

Scale In Left

Tooltip scales in from the left of the trigger.

#hover #transform #border

Live preview Tooltips

Pop Scale Tooltip

The bubble springs open from the trigger with a slight overshoot before settling.

#hover #transform #border

Live preview Tooltips

Shimmer Wave

Tooltip with a shimmering wave gradient sweeping across.

#hover #animation #gradient

Live preview Tooltips

Shutter Diagonal

Tooltip reveals through a diagonal shutter wipe.

#hover #transform #border

Live preview Tooltips

Silver Metallic

Silver metallic tooltip with subtle gradient above the trigger.

#hover #gradient #transform

Live preview Tooltips

Skew Top

Tooltip skews into place above the trigger.

#hover #transform #border

Live preview Tooltips

Slide Diagonal Bottom-Left

Tooltip slides in from the bottom-left corner of the trigger.

#hover #transform #border

Live preview Tooltips

Slide Right

Tooltip slides in from the left toward the right side.

#hover #transform #border

Live preview Tooltips

Spotlight Radial

Tooltip with a radial spotlight gradient highlighting its center.

#hover #gradient #transform

Live preview Tooltips

Spring Top

Tooltip bounces with a spring overshoot above the trigger.

#hover #transform #border

Live preview Tooltips

St Patrick Clover

Lucky green St Patrick's Day clover tooltip.

#hover #gradient #transform

Live preview Tooltips

Status Away

Away status tooltip with yellow dot above the trigger.

#hover #transform #shadow

Live preview Tooltips

Status Offline

Offline status tooltip with grey dot above the trigger.

#hover #transform #border

Live preview Tooltips

Status Online

Online status tooltip with green dot above the trigger.

#hover #transform #shadow

Live preview Tooltips

Status Pill

Pill-shaped status tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Sticker Peel

Tooltip that peels up like a sticker above the trigger.

#hover #transform #shadow

Live preview Tooltips

Stock Status

Stock availability status tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Stretch X

Tooltip stretches horizontally into view above the trigger.

#hover #transform #border

Live preview Tooltips

Sunset Blaze

Vibrant sunset-blaze gradient tooltip.

#hover #gradient #transform

Live preview Tooltips

Swing Top

Tooltip swings in like a pendulum above the trigger.

#hover #transform #border

Live preview Tooltips

Tada Success

Success tooltip celebrates with a tada animation above the trigger.

#hover #animation #transform

Live preview Tooltips

Tick Marks Bottom

Tooltip with tick-mark decorations along its bottom edge.

#hover #gradient #transform

Live preview Tooltips

Time Stamp

Timestamp tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Valentine Heart

Romantic pink valentine heart tooltip.

#hover #gradient #transform

Live preview Tooltips

Zig Zag

Tooltip that zigzags into view above the trigger.

#hover #animation #transform

Live preview Tooltips

Zoom In Right

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

#hover #transform #border

Live preview Tooltips

Zoom Out Right

Tooltip zooms out from oversized to normal on the right.

#hover #transform #border

Live preview Tooltips

Zoom Out Top

Tooltip zooms from tiny to full size above the trigger.

#hover #transform #border

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

Dash Career Timeline

Sprint seasons stack as track lanes and the newest runner leans further down the straight.

#animation #transform #sport

Live preview Timelines

Drift Eras Timeline

Blunt outlined blocks hold each century over an oversized ghost numeral and shift on hover.

#brutalist #hover #shadow

Live preview Timelines

Flange Merge Timeline

A side branch flanges out of the trunk and curves straight back into the next release.

#border #shadow #branching

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

Hush Lifeline Timeline

Life events written in a quiet hand, each pinned by a slightly uneven ink ring on the margin.

#hover #border-radius #handwriting

Live preview Timelines

Lagoon Thumbnail Timeline

Every entry carries a small gradient frame whose light drifts on its own beat.

#thumbnail #gradient #animation

Live preview Timelines

Lull Retro Timeline

Taped paper notes from three quiet weeks lean at odd angles and straighten under the cursor.

#hover #transform #shadow

Live preview Timelines

Marble Metro Timeline

A thick marble line threads three station rings the way a subway route map does.

#layout #gradient #border

Live preview Timelines

Mica Growing Timeline

The mica rail redraws itself downward on a loop and each dot pops in behind it.

#animation #keyframes #list

Live preview Timelines

Reef Habit Week

A week of habit dots per row, with today's column ringed and pulsing.

#habit #grid #animation

Live preview Timelines

Slate Horizon Timeline

A horizontal slate line with three stops whose captions alternate above and below.

#layout #flexbox #border

Live preview Timelines

Spindle Reading Series

Three spindle speed samples grow into columns above a dashed limit line.

#chart #animation #bars

Live preview Timelines

Spiral Vinyl Timeline

Three grooved records sit in a rack and the selected one spins while its year stays upright.

#radio #animation #radial-gradient

Live preview Timelines

Tether Robot Cycle

A two segment arm walks through reach, grip and place before starting the cycle again.

#animation #transform #robot

Live preview Toggles

Amethyst Violet

Amethyst violet crystal with mystic glow.

#gradient #transform #shadow

Live preview Toggles

Arrive / Depart

Arrow-shaped knob slides with a motion blur filter as track turns blue.

#transform #shadow #filter

Live preview Toggles

Bellows Expand

Camera bellows expand and contract as the knob moves.

#gradient #transform

Live preview Toggles

Binary 0 / 1

Terminal-style toggle highlighting the active digit in green monospace.

#border #transform #switch

Live preview Toggles

Binary Flow

Binary digits stream across the track as data flows.

#animation #gradient #transform

Live preview Toggles

Bubble Pop

Glassy bubble knob pops to a larger size when activated.

#gradient #transform #shadow

Live preview Toggles

Buoyant / Sinking

Buoyant knob floats then sinks beneath the water on toggle.

#gradient #transform #shadow

Live preview Toggles

Butterfly / Cocoon

Cocoon bursts open into a fluttering butterfly.

#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

Clear / Static

Antenna knob picks up static dots scattered across the track.

#gradient #transform #shadow

Live preview Toggles

Co-op / Versus

Cooperative dots become a versus symbol on toggle.

#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

Compact / Spacious

Tight knob expands to a wider spacious layout.

#transform #shadow

Live preview Toggles

Copper / Silver

Warm copper knob cools into a bright silver finish.

#gradient #transform #shadow

Live preview Toggles

Coral Pearl

Coral pink with pearlescent shimmer knob.

#gradient #transform #shadow

Most viewed effects

Browse by category

Popular tags