Most Popular CSS Effects (Page 70)

Live preview Navigation

Glow Trail Step Nav

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

#hover #animation #gradient

Live preview Navigation

Milestone Marker Nav

Horizontal milestone track with markers that pop up on hover.

#hover #gradient #transform

Live preview Navigation

Progress Ring Tracker Nav

Vertical step tracker with circular progress rings on each milestone.

#hover #gradient #transform

Live preview Navigation

Vertical Timeline Nav

Timeline nav with a center spine and milestone dots that activate on hover.

#hover #gradient #transform

Live preview Navigation

Pulse Throb Navbar

Active link throbs with a pulsing scale animation.

#hover #animation #transform

Live preview Navigation

Receipt Jagged Edge Nav

Receipt paper nav with jagged torn bottom edge and active highlight.

#hover #transform #shadow

Live preview Navigation

Ribbon Banner Curl Nav

Active ribbon banner with a curled corner peeling up on hover.

#hover #gradient #transform

Live preview Navigation

Ribbon Banner Flow Nav

Decorative ribbon banner that flows across the top of the nav items.

#hover #animation #gradient

Live preview Navigation

Ribbon Flag Wave Nav

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

#hover #animation #gradient

Live preview Navigation

Full Rotate Navbar

Links spin a full 360 degrees with a smooth rotation on hover.

#hover #transform

Live preview Navigation

Half Rotate Navbar

Links flip 180 degrees on hover, mirroring the text.

#hover #transform

Live preview Navigation

Quarter Rotate Navbar

Links rotate 90 degrees on hover, revealing an icon face.

#hover #transform

Live preview Navigation

Rounded Pill Navbar

Fully rounded pill-shaped navbar with sliding indicator.

#hover #gradient

Live preview Navigation

Royal Purple Navbar

Royal purple navbar with golden accents.

#hover #gradient #shadow

Live preview Navigation

Rubber Stretch Navbar

Hovered links stretch horizontally like rubber then snap back.

#hover #transform

Live preview Navigation

3D Segmented Control

Segmented control with 3D pressed and raised segments.

#hover #gradient #transform

Live preview Navigation

Fill Segmented Control

Segmented control with a left-to-right color fill on the active segment.

#hover #gradient #transform

Live preview Navigation

Glow Segmented Control

Dark segmented control with a neon glow on the active segment.

#hover #shadow #border

Live preview Navigation

Pill Segmented Control

Segmented control with a sliding pill background that follows selection.

#hover #gradient #transform

Live preview Navigation

Shadow Grow Hover Navbar

Hovered links grow a deep multi-layer shadow beneath them.

#hover #transform #shadow

Live preview Navigation

Shake Jitter Navbar

Links shake-jitter on hover with a horizontal animation.

#hover #animation #transform

Live preview Navigation

Bottom Sheet Navbar

Mobile bottom sheet that slides up to reveal nav links.

#hover #animation #transform

Live preview Navigation

Back Arrow Sheet Navbar

Sheet with a back arrow navigation button at the top.

#hover #animation #gradient

Live preview Navigation

Close X Sheet Navbar

Bottom sheet with an X close button in the corner.

#hover #animation #gradient

Live preview Navigation

Grip Handle Sheet Navbar

Bottom sheet with a prominent grip handle and drag indicator.

#hover #animation #gradient

Live preview Navigation

Left Slide Sheet Navbar

Vertical sheet sliding in from the left with stacked links.

#hover #animation #transform

Live preview Navigation

Right Slide Sheet Navbar

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

#hover #animation #transform

Live preview Navigation

Top Drop Sheet Navbar

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

#hover #animation #transform

Live preview Navigation

Shutter Blade Close Nav

Camera shutter blades that close in to hide nav, opening on hover.

#hover #gradient #transform

Live preview Navigation

Shutter Blade Open Nav

Shutter blades that open outward radially to reveal nav links.

#hover #gradient #transform

Live preview Navigation

3D Sidebar

Sidebar with 3D perspective tilt.

#hover #gradient #transform

Live preview Navigation

Brutalist Sidebar

Raw brutalist sidebar with thick borders.

#hover #transform #shadow

Live preview Navigation

Collapsible Sidebar

Sidebar that collapses to icons only.

#hover #gradient

Live preview Navigation

Dark Sidebar

Dark themed sidebar with subtle highlights.

#hover #gradient #shadow

Live preview Navigation

Elevated Sidebar

Sidebar with elevated card design.

#hover #gradient #transform

Live preview Navigation

Expand on Hover Sidebar

Sidebar expands to show labels on hover.

#hover #gradient

Live preview Navigation

Glass Sidebar

Glassmorphism sidebar with blur.

#hover #shadow #border

Live preview Navigation

Glow Sidebar

Dark sidebar with glowing active link.

#hover #shadow #border

Live preview Navigation

Gradient Sidebar

Sidebar with gradient background.

#hover #gradient #shadow

Live preview Navigation

Icons Only Sidebar

Minimal sidebar with only icons.

#hover #gradient #transform

Live preview Navigation

Light Sidebar

Light themed sidebar with soft shadow.

#hover #gradient #shadow

Live preview Navigation

Mini Sidebar

Compact mini sidebar.

#hover #gradient #shadow

Live preview Navigation

Neon Sidebar

Dark neon themed sidebar.

#hover #transform #shadow

Live preview Navigation

Neumorphic Sidebar

Soft neumorphic sidebar.

#hover #shadow

Live preview Navigation

Overlay Sidebar

Sidebar that overlays content when opened.

#hover #gradient

Live preview Navigation

Pinned Sidebar

Full-height pinned sidebar.

#hover #transform #border

Live preview Navigation

Push Content Sidebar

Sidebar that pushes content when expanded.

#hover #gradient #shadow

Live preview Navigation

Rounded Sidebar

Sidebar with rounded pill links.

#hover #gradient #shadow

Live preview Navigation

Square Sidebar

Sidebar with sharp square links.

#hover #transform #border

Live preview Navigation

Skew Diagonal Navbar

Links skew diagonally on hover with a sharp directional motion.

#hover #transform

Live preview Navigation

Slant 3D Fold Navbar

Nav with a 3D fold effect along the diagonal axis.

#hover #transform #3d

Live preview Navigation

Slant Both Cuts Navbar

Nav bar with diagonal cuts on both top corners.

#hover

Live preview Navigation

Slant Bottom Cut Navbar

Nav bar with a slanted diagonal cut at the bottom edge.

#hover

Live preview Navigation

Slant Clip Path Navbar

Nav bar with a custom angled clip-path creating a parallelogram.

#hover

Live preview Navigation

Slant Cut Corner Navbar

Nav with a folded corner cut on the top-right.

#hover

Live preview Navigation

Slant Glow Edge Navbar

Slanted nav with glowing edge accents along the cuts.

#hover #shadow #border

Live preview Navigation

Slant Gradient Flow Navbar

Slanted nav with an animated gradient background flow.

#hover #animation #gradient

Live preview Navigation

Slant Left Cut Navbar

Nav bar with a slanted diagonal cut on the left edge.

#hover

Live preview Navigation

Slant Neon Edge Navbar

Slanted nav with pulsing neon pink edge accents.

#hover #animation #shadow

Live preview Navigation

Slant Perspective 3D Navbar

Nav with a perspective tilt creating a 3D slanted look.

#hover #transform #shadow

Live preview Navigation

Slant Right Cut Navbar

Nav bar with a slanted diagonal cut on the right edge.

#hover

Live preview Navigation

Slant Rotate Tilt Navbar

Nav with the entire bar slightly rotated for a tilted slant.

#hover #gradient #transform

Live preview Navigation

Slant Skew Tilt Navbar

Nav with skew-tilted active item creating a slanted look.

#hover #transform

Live preview Navigation

Slant Top Cut Navbar

Nav bar with a slanted diagonal cut at the top edge.

#hover

Live preview Navigation

Soft Pink Navbar

Soft pink themed navbar with rose accents.

#hover #gradient #shadow

Live preview Navigation

Split Arrow Flow Navbar

Nav links separated by arrow flow indicators pointing right.

#hover #animation #transform

Live preview Navigation

Split Chevron Flow Navbar

Nav links separated by double-chevron flow indicators.

#hover

Live preview Navigation

Split Curve Wave Navbar

Nav links with a wavy curve separator between them.

#hover #transform

Live preview Navigation

Split Diagonal Cut Navbar

Nav links with diagonal cut separators between them.

#hover

Live preview Navigation

Split Dot Flow Navbar

Nav links separated by pulsing dot flow indicators.

#hover #animation #transform

Live preview Navigation

Split Greater Flow Navbar

Nav links separated by greater-than flow indicators.

#hover

Live preview Navigation

Split Half Divider Navbar

Nav split into two halves with a central vertical divider.

#hover #gradient #shadow

Live preview Navigation

Split Horizontal Divider Navbar

Nav links separated by horizontal lines stacked vertically.

#hover #shadow #border

Live preview Navigation

Split Layout Navbar

Navbar with brand on left, links center, actions on right.

#hover #border

Live preview Navigation

Split Line Dashed Navbar

Nav links separated by dashed line dividers.

#hover #gradient #shadow

Live preview Navigation

Split Line Dotted Navbar

Nav links separated by dotted line dividers.

#hover #gradient

Live preview Navigation

Split Line Glow Navbar

Nav links separated by glowing line separators.

#hover #shadow

Live preview Navigation

Split Pipe Flow Navbar

Nav links separated by vertical pipe flow indicators.

#hover

Live preview Navigation

Split Quad Grid Navbar

Nav split into four equal quadrants with cross divider.

#hover

Live preview Navigation

Split Slash Flow Navbar

Nav links separated by slash flow indicators.

#hover #shadow

Live preview Navigation

Split Thirds Grid Navbar

Nav split into three equal columns separated by dividers.

#hover #border

Live preview Navigation

Split Vertical Divider Navbar

Nav with prominent vertical divider bars between links.

#hover #border

Live preview Navigation

Split Wave Edge Navbar

Nav with a wave-edge border between active and inactive items.

#hover #gradient

Live preview Navigation

Split Zigzag Edge Navbar

Nav links with zigzag-edged separators between items.

#hover #transform

Live preview Navigation

Spring Pop Navbar

Active link springs outward with a playful pop animation.

#hover #gradient #transform

Live preview Navigation

Square Sharp Navbar

Sharp-edged navbar with no rounding.

#hover #transform #border

Live preview Navigation

Stamp Ink Rotate Nav

Active link shows a rotated ink stamp badge with skewed impression.

#hover #gradient #transform

Live preview Navigation

Stamp Paper Fold Nav

Paper sheet nav with folded corner revealing the active item underneath.

#hover #gradient #transform

Live preview Navigation

3D Step Indicator

3D extruded step indicator.

#hover #transform #shadow

Live preview Navigation

Checkmarks Step Indicator

Step indicator with checkmarks for done steps.

#hover

Live preview Navigation

Circular Step Indicator

Step indicator with circular progress ring.

#hover #transform #shadow

Live preview Navigation

Dots Step Indicator

Step indicator with dots between numbers.

#hover #transform #shadow

Live preview Navigation

Floating Step Indicator

Floating step indicator with hover lift.

#hover #transform #shadow

Live preview Navigation

Glow Step Indicator

Dark step indicator with glowing active step.

#hover #shadow

Live preview Navigation

Gradient Step Indicator

Step indicator with animated gradient on active.

#hover #animation #gradient

Live preview Navigation

Horizontal Step Indicator

Horizontal step indicator with connecting lines.

#hover #shadow

Browse by category

Popular tags