# animation CSS effects

Live preview Navigation

Progress Bar Pagination

Pagination with a progress bar above numbers.

Live preview Navigation

Gradient Pill Nav

Pill nav with animated gradient active state.

Live preview Navigation

Glow Trail Step Nav

Stepper with a glowing trail line that pulses along the active path.

Live preview Navigation

Pulse Throb Navbar

Active link throbs with a pulsing scale animation.

Live preview Navigation

Ribbon Flag Wave Nav

Active tab styled as a waving flag ribbon extending below the link.

Live preview Navigation

Shake Jitter Navbar

Links shake-jitter on hover with a horizontal animation.

Live preview Navigation

Bottom Sheet Navbar

Mobile bottom sheet that slides up to reveal nav links.

Live preview Navigation

Back Arrow Sheet Navbar

Sheet with a back arrow navigation button at the top.

Live preview Navigation

Close X Sheet Navbar

Bottom sheet with an X close button in the corner.

Live preview Navigation

Grip Handle Sheet Navbar

Bottom sheet with a prominent grip handle and drag indicator.

Live preview Navigation

Left Slide Sheet Navbar

Vertical sheet sliding in from the left with stacked links.

Live preview Navigation

Right Slide Sheet Navbar

Vertical sheet sliding in from the right with profile-style links.

Live preview Navigation

Top Drop Sheet Navbar

Sheet that drops down from the top of the navbar revealing links.

Live preview Navigation

Slant Gradient Flow Navbar

Slanted nav with an animated gradient background flow.

Live preview Navigation

Slant Neon Edge Navbar

Slanted nav with pulsing neon pink edge accents.

Live preview Navigation

Split Arrow Flow Navbar

Nav links separated by arrow flow indicators pointing right.

Live preview Navigation

Split Dot Flow Navbar

Nav links separated by pulsing dot flow indicators.

Live preview Navigation

Gradient Step Indicator

Step indicator with animated gradient on active.

Live preview Navigation

Swing Pendulum Navbar

Links swing like a pendulum anchored at the top on hover.

Live preview Navigation

Animated Underline Tabs

Tabs with continuously animated underline.

Live preview Navigation

Gradient Background Tabs

Tabs with animated gradient background on active.

Live preview Navigation

Text Glitch Hover Navbar

Hovered links glitch with a split-color RGB shift effect.

Live preview Navigation

Text Glow Pulse Link Navbar

Each link has a pulsing text glow that intensifies on hover.

Live preview Navigation

Text Neon Flicker Navbar

Active link text flickers like a real neon sign.

Live preview Navigation

Text Rainbow Flow Navbar

Active link text flows through a rainbow gradient animation.

Live preview Navigation

Text Scramble Hover Navbar

Hovered links scramble their letters via a positional jitter animation.

Live preview Navigation

Text Shadow Dance Navbar

Hovered links perform a layered text-shadow dance animation.

Live preview Navigation

Text Typewriter Navbar

Active link types out its text with a blinking cursor.

#hover #animation

Live preview Navigation

Vertical Tab Gradient Bg Flow

Vertical tabs with an animated gradient background flow on the active.

Live preview Navigation

Vertical Tab Neon Active Line

Vertical tabs with a pulsing neon active line indicator.

Live preview Navigation

Wobble Jiggle Navbar

Links wobble-jiggle on hover using a keyframe animation.

Acropolis Greek

Greek acropolis marble on text.

Amber Glow

Warm amber text with a soft pulsing inner glow.

#animation #shadow

Anchor Heavy

Heavy nautical anchor on text.

Andromeda Galaxy

Spiraling blue Andromeda galaxy in text.

Arcade Pixel

Retro arcade pixelated text.

#animation #shadow

Archery Arrow

Arrow flying through air on text.

Aries Ram

Bold ram-headed Aries zodiac sign.

Arpeggio Rise

Rising arpeggiated chord notes on text.

Asteroid Belt

Orbiting specks circling around text.

Aurora Australis

Southern lights rippling in cool tones.

Aurora Borealis

Northern lights shimmering across text.

Aurora Glow

Soft shifting aurora borealis gradient glow.

Automobile Horn

Car horn honking on text.

Balloon Rise

Floating balloon rising on text.

Bamboo Tall

Tall bamboo stalk on text.

Barometer Fall

Falling barometric pressure on text.

Baroque Ornate

Ornate baroque gold on text.

Basil Herb

Fresh basil herb on text.

Bass Clef Roll

Rolling bass clef low-end on text.

Bass Throb

Deep bass throb pulsing on text.

Bauhaus Block

Bauhaus primary color blocks on text.

Beam Spotlight

Vertical beam of light shining down on text.

#animation #gradient

Beat Thump

Heavy beat thump on text.

Bicycle Pedal

Bicycle pedaling motion on text.

Birch White

White birch bark on text.

#animation #gradient

Black Hole Pull

Text being slowly sucked into a dark void center.

Blackberry Dark

Dark purple blackberry on text.

Blizzard Snow

Heavy blizzard snow blowing across text.

Blueberry Blue

Deep blue blueberry on text.

Bob Buoyant

Buoyant bobbing on water motion.

Bonsai Mini

Miniature bonsai on text.

3D Bounce

Text bouncing with a 3D perspective tilt.

Bounce Horizontal Slide

Bouncing horizontal slide motion.

Bounce Random Chaos

Random chaotic bounce motion.

Bounce Rhythm

Text bouncing up and down in a steady rhythm.

Bounce Vertical Hop

Bouncing vertical hop motion.

Boxing Glove

Boxing glove punching on text.

Breathe Fast Rapid

Rapid fast breathing animation.

Slow Breathe

Text breathing slowly in and out.

#animation #shadow #transform

Breathing Text

Text slowly scales and glows in a calm breathing rhythm.

Gentle Breeze

Soft gentle breeze rippling text.

Brutalist Cement

Raw brutalist cement on text.

Rising Bubbles

Animated bubbles rising through the text fill.

#animation #gradient

Byzantine Mosaic

Byzantine gold mosaic on text.

Cactus Spiky

Spiky desert cactus on text.

Cadenza Solo

Virtuosic solo cadenza on text.

#animation #shadow #filter

Calm Still

Perfectly calm still air over text.

Camp Tent

Camping tent in the wild on text.

Cancer Crab

Sideways scuttling crab Cancer sign.

Candle Flicker

Warm candle flame flickering glow.

Cardamom Pod

Green cardamom pod on text.

Cards Shuffle

Shuffling playing cards on text.

Carnation Ruffle

Ruffled carnation petals on text.

Carnival Mask

Mardi Gras carnival mask on text.

Cassette Tape Roll

Rolling cassette tape spooling text.

Castle Stone

Grey stone castle wall on text.

#animation #shadow #filter

Cathedral Gothic

Gothic cathedral dark stone on text.

CD Shimmer

Iridescent CD surface shimmer on text.

#animation #shadow #filter

Celsius Cold

Freezing cold Celsius reading on text.

Chateau French

French chateau elegance on text.

Chess Bishop

Chess bishop on diagonal on text.

Chess Queen

Chess queen crown on text.

Chess Rook

Chess rook castle on text.