Most Popular CSS Effects (Page 5)

Live preview Modals

Cascade Notify Modal

A notification preferences dialog cascades its switch rows into place one after another.

#modal #toggle #stagger

Live preview Modals

Echo Invite Modal

Two offset outline echoes chase the invitation card into place while a warm light leak sweeps across it.

#modal #light-leak #stagger

Live preview Modals

Lull Stock Modal

A folded origami stock alert falls slowly through the scene, drifting sideways before it settles flat.

#modal #origami #keyframes

Live preview Marquees

Canyon LED Matrix

A dot mask sits over the caption so the line reads as an amber LED matrix panel.

#marquee #led #dot-matrix

Live preview Marquees

Dash Ping Pong

The strip runs to the left, eases to a stop and then retraces its path to the right.

#marquee #alternate #ping-pong

Live preview Marquees

Nickel Beacon Strip

A warning lamp pulses at the leading edge while the advisory text keeps rolling.

#marquee #beacon #blink

Live preview Marquees

Shaft Chain Drive

Interlocking links are pulled along by a toothed sprocket turning at the left end.

#marquee #chain #sprocket

Live preview Navigation

Blurred Glass Navbar

Navbar with heavy backdrop blur and gradient border.

#hover #gradient #shadow

Live preview Navigation

To Minus Hamburger

Hamburger that becomes a minus line on hover.

#hover #transform #border

Live preview Navigation

3D Arrow Breadcrumbs

Breadcrumbs with 3D arrow separators.

#hover #gradient #transform

Live preview Navigation

Animated Arrow Breadcrumbs

Breadcrumbs with animated moving arrows.

#hover #animation #transform

Live preview Navigation

Curve Arrow Breadcrumbs

Breadcrumbs with curved arrow separators.

#hover #transform

Live preview Navigation

Pipe Separator Breadcrumbs

Breadcrumbs with pipe separators.

#hover

Live preview Navigation

Glass Panel Drawer Navbar

Drawer with frosted glass panel styling over a colored background.

#hover #shadow #border

Live preview Navigation

Stack Cards Drawer Navbar

Drawer with stacked card-style links that fan out on hover.

#hover #transform #shadow

Live preview Navigation

Tooltip Icon Nav

Icon nav with tooltip on hover.

#hover #gradient #transform

Live preview Navigation

Liquid Morph Tab Navbar

Active tab morphs between links like a liquid blob.

#hover #shadow

Live preview Navigation

Magnetic Pull Navbar

Links magnetically grow toward the hovered item while neighbors shrink back.

#hover #transform #shadow

Live preview Navigation

Flip In Menu

Menu that flips in on Y axis.

#hover #transform #shadow

Live preview Navigation

Push Content Menu

Side menu that pushes content when opened.

#hover #transform #shadow

Live preview Navigation

Vertical List Menu

Simple vertical list menu.

#hover #gradient #shadow

Live preview Navigation

Rotate Spin In Modal Navbar

Modal nav that rotates into view with a slight spin.

#hover #animation #gradient

Live preview Navigation

Neon Edge Navbar

Navbar with neon glowing edges.

#hover #transform #shadow

Live preview Navigation

Dark Fade Overlay Navbar

Side panel nav with a fading dark overlay backdrop.

#hover #animation #gradient

Live preview Navigation

Fullscreen Menu Overlay Navbar

Full-screen overlay menu with large editorial typography links.

#hover #animation #border

Live preview Navigation

Aurora Gradient Overlay Navbar

Modal nav over an aurora gradient animated background.

#hover #animation #gradient

Live preview Navigation

Light Fade Overlay Navbar

Side panel nav with a fading light translucent backdrop.

#hover #animation #gradient

Live preview Navigation

Active Flip Pagination

Active page flips on Y axis.

#hover #transform #shadow

Live preview Navigation

Number Glow Pagination

Active number has glowing aura.

#hover #shadow

Live preview Navigation

Pulse Throb Navbar

Active link throbs with a pulsing scale animation.

#hover #animation #transform

Live preview Navigation

Pentagon Background Tabs

Tabs with polygon clip-path background morph.

#hover #gradient

Live preview Navigation

Square Active Tabs

Square-shaped active tab indicator.

#hover

Live preview Navigation

Thick Underline Tabs

Tabs with a thick underline indicator.

#hover #border

Live preview Navigation

Text Blur Focus Navbar

All links blur except the hovered one which comes into sharp focus.

#hover #filter

Live preview Navigation

Text Reveal Mask Navbar

Hovered link text reveals through a vertical wipe mask.

#hover

Live preview Navigation

Text Slide Down Mask Navbar

Link text slides down, replaced by a duplicate from above.

#hover

Live preview Progress

Coral Comet Progress

The fill ends in a pulsing comet head that keeps glowing at the leading edge of the track.

#animation #transform #shadow

Live preview Progress

Gear Copy Progress

A copy dialog where a sheet keeps flying from the source folder into the destination folder.

#file-copy #animation #flexbox

Live preview Progress

Origami Cusp Progress

Eight paper facets alternate their crease direction and the five set folds carry the colour.

#origami #clip-path #flexbox

Live preview Sliders

Amber Glow Slider

A dim ember rail runs beneath a knob that breathes its own pulsing amber halo.

#slider #neon #animation

Live preview Sliders

Anvil Type Size

A live specimen line grows from small to display size the moment the control is engaged.

#slider #typography #preview

Live preview Sliders

Bearing Detent Percent

Four notches cut the rail into quarter stops and a polished ball bearing snaps between them.

#slider #detent #stepped

Live preview Sliders

Caliper Brake Bias

A vented brake-disc rail with a red centre detent and a clamp-shaped handle splitting bias.

#slider #balance #brake

Live preview Sliders

Coil Mono Slider

Pure black and pure white only: the filled span is wound with a tight diagonal coil.

#slider #monochrome #high-contrast

Live preview Sliders

Cove Circular Frame

A round instrument bezel with a slowly turning dashed ring around the inner rail.

#slider #circular #bezel

Live preview Sliders

Dynamo Decibel Meter

A segmented LED ladder runs green to red above a rail scaled in decibels down to silence.

#slider #decibel #meter

Live preview Sliders

Meadow Star Rating

A five-step rating rail whose amber fill stops exactly where the lit stars above run out.

#slider #rating #star

Live preview Sliders

Quartz Gradient Slider

A prismatic quartz rail runs the full spectrum under a bezelled white knob.

#slider #gradient #spectrum

Live preview Sliders

Willow Chunky Slider

An oversized touch target with a thick channel and a knob the size of a fingertip.

#slider #oversized #touch

Live preview Tabs

Cobalt Stepper Tabs

Numbered cobalt nodes on a rail, with the connecting line filling as you advance.

#transform #gradient #stepper

Live preview Tabs

Nickel Notch Tabs

A small pointer notch slides under the active tab and aims at the panel below.

#transform #border #shadow

Live preview Tabs

Tundra Theme Picker Tabs

Swatch tabs repaint the preview card below instead of swapping its content.

#theme #color #border

Live preview Tables

Chassis Permission Grid

A role by permission grid where every cell is a tiny three position switch drawn in pure CSS.

#table #matrix #permissions

Live preview Tables

Willow Header Icons

Each header label is prefixed by a small icon drawn purely from borders and shadows.

#table #icons #header

Live preview Text

Bounce Horizontal Slide

Bouncing horizontal slide motion.

#animation #transform

Live preview Text

Breathing Text

Text slowly scales and glows in a calm breathing rhythm.

#animation #shadow #transform

Live preview Text

Burlap Coarse

Coarse burlap fabric weave.

#gradient

Live preview Text

Cloud Cover Grey

Overcast grey cloud cover on text.

#animation #gradient #shadow

Live preview Text

Collage Cutout

Magazine cutout collage ransom-style text.

#transform #border

Live preview Text

Color Blocks Three

Three vertical color blocks.

#gradient

Live preview Text

Color Negative Space

Negative space color knockout effect.

#shadow

Live preview Text

Constructivism Bold Red

Constructivist bold red propaganda.

#transform

Live preview Text

Cosmic Nebula

Swirling nebula clouds of purple and pink within text.

#animation #gradient

Live preview Text

Count Up Roller

A single digit cycling 0 through 9 on a stepped roller, like an odometer.

#animation #shadow #transform

Live preview Text

Distortion Grit

Gritty distorted guitar text.

#animation #transform #shadow

Live preview Text

Grid Dots

Evenly-spaced dot grid in monochrome.

#gradient

Live preview Text

Ember Glow Warm

Warm ember pulsing glow.

#animation #shadow

Live preview Text

Glissando Slide

Sliding glissando pitch on text.

#animation #gradient #transform

Live preview Text

Jade Translucent

Translucent jade green stone.

#gradient #filter

Live preview Text

Manor Estate

Grand manor estate on text.

#animation #gradient #shadow

Live preview Text

Metallic Bronze

Aged bronze with deep brown metallic patina.

#gradient

Live preview Text

Music Note Bounce

Bouncing musical notes over text.

#animation #transform #shadow

Live preview Text

Palace Grand

Grand opulent palace gold on text.

#animation #gradient #shadow

Live preview Text

Petals Bloom

Flower petals bloom pattern.

#gradient

Live preview Text

Bevel Shine

Beveled highlight on glossy dimensional text.

#shadow

Live preview Text

Skyline Silhouette

Dark city skyline silhouette on text.

#animation #gradient #filter

Live preview Text

Train Steam

Steam train chugging on text.

#animation #transform #shadow

Live preview Text

Typewriter Old Remington

Old Remington typewriter ink.

#shadow

Live preview Tooltips

3D Rotate Y

Tooltip that rotates fully on the Y axis to appear above the trigger.

#hover #transform #border

Live preview Tooltips

Curve Arrow Top

Tooltip with a curved swooping connector above the trigger.

#hover #transform #border

Live preview Tooltips

Calendar Event

Calendar event tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Circle Mask

Tooltip reveals with a circle mask opening above the trigger.

#hover #transform #border

Live preview Tooltips

Diamond Grow Clip

Diamond-shaped tooltip that grows from a point above the trigger.

#hover #transform

Live preview Tooltips

Message Tail Clip

Chat-bubble tooltip with a clip-path message tail.

#hover #transform

Live preview Tooltips

Notch Corner TR Clip

Tooltip with a notched top-right corner clip-path.

#hover #transform

Live preview Tooltips

Spiral Shell Clip

Tooltip with a spiral shell-like curved shape.

#hover #transform

Live preview Tooltips

Commit Hash

Git commit hash tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

#hover #gradient #transform

Live preview Tooltips

Corners Bracket

Tooltip with corner brackets drawing in above the trigger.

#hover #transform #border

Live preview Tooltips

Cursor Follow

Tooltip that follows the cursor above the trigger.

#hover #animation #transform

Live preview Tooltips

Emerald Tip

Emerald green tooltip with subtle shimmer above the trigger.

#hover #gradient #transform

Live preview Tooltips

Fold Bottom

Tooltip unfolds open below the trigger.

#hover #transform #border

Live preview Tooltips

Glassmorphism Top

Frosted glass tooltip with backdrop blur above the trigger.

#hover #transform #shadow

Live preview Tooltips

Icon Crown

Tooltip with crown icon above the trigger.

#hover #gradient #transform

Live preview Tooltips

Light Top

Clean light tooltip with subtle shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Mono Dark

Monospace dark tooltip with terminal feel above the trigger.

#hover #transform #border

Most viewed effects

Browse by category

Popular tags