Most Popular CSS Effects (Page 79)

Live preview Marquees

Pearl Headline Sweep

Oversized display type sweeps across the frame like a gallery wall statement.

#marquee #typography #headline

Live preview Marquees

Piston Commit Log

Short hashes, messages and authors roll past like a live repository history.

#marquee #commit #git

Live preview Marquees

Prairie Emboss Roll

Layered shadows extrude the lettering so the moving line looks pressed in metal.

#marquee #emboss #text-shadow

Live preview Marquees

Pulse Spectrum Run

Seven words carry the colours of a spectrum in order and glow one after the other.

#marquee #spectrum #colour

Live preview Marquees

Pylon Patrol Sweep

Two lamps alternate while a tilted search beam patrols back and forth over the text.

#marquee #patrol #beam

Live preview Marquees

Quartz Dot News

Headline fragments separated by generated bullet dots, framed by hairline rules.

#marquee #news #separator

Live preview Marquees

Quiver Underline Bar

A slim progress rule refills under the rail, marking each pass of the moving caption.

#marquee #progress #underline

Live preview Marquees

Ratchet Odometer Bank

Counter drums click through their digits while the whole meter bank rolls left.

#marquee #odometer #counter

Live preview Marquees

Reef Twin Hairlines

Two hairline rails scroll along the top and bottom edges around a still headline.

#marquee #hairline #edges

Live preview Marquees

Ridge Price Cut Band

A promo band where every entry strikes an old price and shouts the new one.

#marquee #price #promo

Live preview Marquees

Ripple Bounce Beads

Round beads hop up and down out of phase while the whole string slides to the left.

#marquee #bounce #beads

Live preview Marquees

Rivet Flight Row

Flight numbers, routes and gate states cross the panel like an airport crawl.

#marquee #flight #airport

Live preview Marquees

Ruby Outline Strip

Hollow stroked words alternate with solid ones as the ruby strip cycles past.

#marquee #outline #typography

Live preview Marquees

Savanna Sheen Pass

A soft gradient highlight sweeps over the rail while the caption pulses in step.

#marquee #sheen #gradient

Live preview Marquees

Slate Vertical Feed

A stacked status list rolls upward forever inside a slate coloured window.

#marquee #vertical #list

Live preview Marquees

Socket Temperature Chart

Reading columns rise then fall as the hourly temperature chart scrolls sideways.

#marquee #chart #temperature

Live preview Marquees

Spindle Metric Rail

Resource gauges travel past while every fill bar keeps breathing on its own beat.

#marquee #metrics #gauge

Live preview Marquees

Summit Side Strip

A narrow vertical rail hugs the right edge with rotated type climbing upward.

#marquee #vertical #sidebar

Live preview Marquees

Sway Spin Glyphs

Every letter turns on its own vertical axis as the row of glyphs travels sideways.

#marquee #rotate #letters

Live preview Marquees

Thicket Divider Run

Every item is closed by a thin upright rule, giving the run a printed masthead feel.

#marquee #divider #separator

Live preview Marquees

Tide Mixed Scale

Words of three different weights and sizes share one rail for an uneven rhythm.

#marquee #typography #mixed-scale

Live preview Marquees

Topaz Gradient Line

The moving caption is painted by a clipped gradient instead of a flat colour.

#marquee #gradient #background-clip

Live preview Marquees

Tundra Credential Belt

Certification badges with tick marks pass by like an accreditation footer strip.

#marquee #badge #certification

Live preview Marquees

Turbine Film Strip

Numbered frames run between two perforated edges that advance with the reel.

#marquee #film #perforation

Live preview Marquees

Valley Sponsor Roster

Numbered roster entries flow past like a sponsor wall or a team credit list.

#marquee #roster #sponsors

Live preview Marquees

Valve Crypto Tape

Round token badges lead each pair as the quote tape drifts across a terminal strip.

#marquee #crypto #ticker

Live preview Marquees

Verge Counter Bed

A field of dots creeps to the right underneath a caption that travels to the left.

#marquee #background #opposite

Live preview Marquees

Wander Shadow Lag

A coloured copy of the caption runs a touch slower, so its shadow keeps sliding off.

#marquee #shadow #offset

Live preview Marquees

Willow Grid Floor

The caption rides over a fine engineering grid that pans slowly the other way.

#marquee #grid #parallax

Live preview Marquees

Wisp Edge Markers

Two triangular pointers guard the ends of the window and breathe toward the centre.

#marquee #pointer #triangle

Live preview Marquees

Zenith Cross Lap

Two oversized translucent lines overlap vertically and slide through one another.

#marquee #overlap #opposite

Live preview Navigation

3D Perspective Navbar

Navbar with 3D hover lift and perspective transform.

#hover #transform #shadow

Live preview Navigation

3D Tilt X Navbar

Active link tilts on the X-axis with deep perspective.

#hover #transform #shadow

Live preview Navigation

3D Tilt XY Navbar

Active link tilts diagonally on both X and Y axes.

#hover #transform #shadow

Live preview Navigation

3D Tilt Y Navbar

Active link tilts on the Y-axis with deep perspective.

#hover #transform #shadow

Live preview Navigation

Arrow 3D Perspective Navbar

Nav with 3D perspective arrow-shaped active indicator.

#hover #transform #shadow

Live preview Navigation

Arrow Asterisk Spin Navbar

Nav with spinning asterisk arrow accent on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Bounce Drop Navbar

Nav with arrow indicators that bounce-drop on hover.

#hover #animation #transform

Live preview Navigation

Arrow Chevron Point Navbar

Nav with chevron-pointed active indicators.

#hover #transform

Live preview Navigation

Arrow Circle Dot Navbar

Nav with circular dot arrow indicators on active items.

#hover #shadow #border

Live preview Navigation

Arrow Cross Mark Navbar

Nav with cross-mark arrow accent on the active item.

#hover #transform

Live preview Navigation

Arrow Diagonal Travel Navbar

Nav links travel diagonally on hover with arrow accents.

#hover #transform

Live preview Navigation

Arrow Diamond Shape Navbar

Nav with diamond-shaped arrow indicators on active items.

#hover

Live preview Navigation

Arrow Double Pointer Navbar

Nav with double-pointer arrow indicators on the active item.

#hover

Live preview Navigation

Arrow Filled Bg Navbar

Nav with arrow-shaped filled background on the active item.

#hover

Live preview Navigation

Arrow Flip 3D Navbar

Nav arrow indicators flip in 3D on hover.

#hover #transform #3d

Live preview Navigation

Arrow Floating Bob Navbar

Nav links with floating arrow indicators that bob up and down.

#hover #animation #transform

Live preview Navigation

Arrow Flow Down Drop Navbar

Vertical nav with arrow indicators flowing downward.

#hover

Live preview Navigation

Arrow Flow Left Slide Navbar

Nav with arrow-shaped active indicator sliding left on hover.

#hover

Live preview Navigation

Arrow Flow Right Slide Navbar

Nav with arrow-shaped active indicator sliding right on hover.

#hover

Live preview Navigation

Arrow Flow Up Rise Navbar

Vertical nav with arrow indicators rising upward.

#hover

Live preview Navigation

Arrow Glow Active Navbar

Nav with glowing arrow accent on the active item.

#hover #shadow

Live preview Navigation

Arrow Gradient Flow Navbar

Nav with gradient animated arrow indicators.

#hover #animation #gradient

Live preview Navigation

Arrow Grow Expand Navbar

Nav arrow indicators grow and expand on hover.

#hover #transform

Live preview Navigation

Arrow Heart Beat Navbar

Nav with heart-beat arrow accent on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Neon Active Navbar

Nav with neon glowing arrow on the active item.

#hover #animation #shadow

Live preview Navigation

Arrow Outline Draw Navbar

Nav with arrow outline drawn on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Pentagon Shape Navbar

Nav links shaped as pentagons with arrow flow.

#hover

Live preview Navigation

Arrow Pill Shape Navbar

Nav with pill-shaped arrow indicators on active items.

#hover

Live preview Navigation

Arrow Pulse Throb Navbar

Nav arrow indicators pulse and throb on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Rotate Spin Navbar

Nav arrow indicators rotate-spin when hovered.

#hover #transform

Live preview Navigation

Arrow Shrink Compress Navbar

Nav links compress and shrink with arrow accent on hover.

#hover #transform

Live preview Navigation

Arrow Slide Track Navbar

Nav links slide along a track with arrow indicator.

#hover #transform

Live preview Navigation

Arrow Square Dot Navbar

Nav with square dot arrow indicators on active items.

#hover #shadow #border

Live preview Navigation

Arrow Star Burst Navbar

Nav with star-burst arrow accent on the active item.

#hover #transform

Live preview Navigation

Arrow Triangle Point Navbar

Nav with triangle-pointed active indicators.

#hover

Live preview Navigation

Arrow Triple Stack Navbar

Nav with triple-stacked arrow indicators on the active item.

#hover #transform

Live preview Navigation

Arrow Wave Flow Navbar

Nav with wavy arrow flow separators between items.

#hover #animation #transform

Live preview Navigation

Arrow Zigzag Flow Navbar

Nav with zigzag-shaped arrow flow separators.

#hover #animation #transform

Live preview Navigation

Aurora Background Navbar

Navbar with aurora-like animated gradient blobs.

#hover #animation #gradient

Live preview Navigation

Blind Slats Roll Nav

Window blinds that roll up to reveal the nav links on hover.

#hover #transform #border

Live preview Navigation

Blind Slats Tilt Nav

Window blind slats that tilt open to reveal nav links on hover.

#hover #transform

Live preview Navigation

Bob Buoyant Navbar

Links bob up and down buoyantly on hover.

#hover #animation #gradient

Live preview Navigation

Bordered Bottom Navbar

Navbar with thick gradient bottom border.

#hover #gradient #shadow

Live preview Navigation

Bordered Top Navbar

Navbar with thick gradient top border.

#hover #gradient #shadow

Live preview Navigation

Fixed Bottom Nav

Fixed bottom navigation bar with icons.

#hover #transform

Live preview Navigation

Glass Bottom Nav

Glassmorphism bottom navigation.

#hover #shadow #border

Live preview Navigation

Glow Bottom Nav

Bottom nav with glowing active item.

#hover #shadow #border

Live preview Navigation

Gradient Bottom Nav

Bottom nav with gradient active icon.

#hover #gradient #transform

Live preview Navigation

Bounce Drop Navbar

Hovered links drop and bounce in from above with an overshoot.

#hover #transform

Live preview Navigation

Chevron Breadcrumbs

Arrow-shaped crumbs interlock with clip-path and the trail brightens on hover.

#hover #clip-path

Live preview Navigation

Breathe Glow Navbar

Active link breathes with a soft expanding glow halo.

#hover #animation #shadow

Live preview Navigation

Brutalist Navbar

Raw brutalist navbar with thick borders and offset shadow.

#hover #transform #shadow

Live preview Navigation

3D Rotate Hamburger

Hamburger with full 3D rotation on hover.

#hover #transform #border

Live preview Navigation

Bounce Hamburger

Hamburger that bounces on hover.

#hover #animation #transform

Live preview Navigation

Morph to Arrow Hamburger

Hamburger that morphs into a left arrow.

#hover #transform #border

Live preview Navigation

Morph to X Hamburger

Hamburger menu icon that morphs to X on hover.

#hover #transform #border

Live preview Navigation

Rotate Hamburger

Hamburger with rotating lines on hover.

#hover #transform #border

Live preview Navigation

Square Hamburger

Hamburger inside a square that morphs on hover.

#hover #transform #border

Live preview Navigation

To Arrow Hamburger

Hamburger that becomes an arrow on hover.

#hover #transform #border

Live preview Navigation

To Dots Hamburger

Hamburger that becomes 3 vertical dots on hover.

#hover #transform #border

Live preview Navigation

To Grid Hamburger

Hamburger that becomes a 3x3 grid of dots on hover.

#hover #border

Live preview Navigation

Center Logo Navbar

Navbar with the logo centered and split links.

#hover #transform #border

Live preview Navigation

Color Ripple Hover Navbar

Color ripples outward from each link on hover with a radial gradient.

#hover #gradient #transform

Live preview Navigation

Keyboard Command Palette

Command palette where each item shows its keyboard shortcut hint.

#hover #shadow #border

Live preview Navigation

Modal Command Palette

Floating command palette styled like a modal dialog with section header.

#hover #shadow #border

Browse by category

Popular tags