Live preview Navigation
Perspective Tilt Navbar
Active link lifts forward in 3D perspective with translateZ.
#transform CSS effects
5,986 free, pure-CSS effects match the "transform" tag. Each is copy-ready and needs no library or build step.
Live preview Navigation
Pill Highlight Nav
A rounded highlight sits behind the hovered item and scales in from its centre.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Polaroid Tilt Stack Nav
Polaroid-photo style nav items stacked at alternating tilts.
Live preview Navigation
Glow Trail Step Nav
Stepper with a glowing trail line that pulses along the active path.
Live preview Navigation
Milestone Marker Nav
Horizontal milestone track with markers that pop up on hover.
Live preview Navigation
Progress Ring Tracker Nav
Vertical step tracker with circular progress rings on each milestone.
Live preview Navigation
Vertical Timeline Nav
Timeline nav with a center spine and milestone dots that activate on hover.
Live preview Navigation
Receipt Jagged Edge Nav
Receipt paper nav with jagged torn bottom edge and active highlight.
Live preview Navigation
Ribbon Banner Curl Nav
Active ribbon banner with a curled corner peeling up on hover.
Live preview Navigation
Ribbon Banner Flow Nav
Decorative ribbon banner that flows across the top of the nav items.
Live preview Navigation
Ribbon Flag Wave Nav
Active tab styled as a waving flag ribbon extending below the link.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Scroll Progress Bar
A reading progress bar driven by scroll-linked animation, with no script at all.
Live preview Navigation
Live preview Navigation
Fill Segmented Control
Segmented control with a left-to-right color fill on the active segment.
Live preview Navigation
Pill Segmented Control
Segmented control with a sliding pill background that follows selection.
Live preview Navigation
Shadow Grow Hover Navbar
Hovered links grow a deep multi-layer shadow beneath them.
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
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
Shutter Blade Close Nav
Camera shutter blades that close in to hide nav, opening on hover.
Live preview Navigation
Shutter Blade Open Nav
Shutter blades that open outward radially to reveal nav links.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Slant Rotate Tilt Navbar
Nav with the entire bar slightly rotated for a tilted slant.
Live preview Navigation
Live preview Navigation
Split Arrow Flow Navbar
Nav links separated by arrow flow indicators pointing right.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Stamp Ink Rotate Nav
Active link shows a rotated ink stamp badge with skewed impression.
Live preview Navigation
Stamp Paper Fold Nav
Paper sheet nav with folded corner revealing the active item underneath.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Swing Pendulum Navbar
Links swing like a pendulum anchored at the top on hover.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Icon Tab Bar
A mobile style tab bar where the selected item lifts and reveals its caption.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Letter Spacing Grow Navbar
Hovered link expands its letter spacing for a refined editorial feel.
Live preview Navigation
Letter Spacing Shrink Navbar
Links have wide letter spacing that compresses on hover.
Live preview Navigation
Text Scramble Hover Navbar
Hovered links scramble their letters via a positional jitter animation.
Live preview Navigation
Text Stroke Draw Navbar
Active link text has its stroke drawn animatedly via dash-offset.
Live preview Navigation
Ticket Stub Perforate Nav
Nav styled as ticket stubs with perforated edges between items.
Live preview Navigation
Ticket Stub Tear Nav
Active ticket stub torn along its perforation edge on hover.
Live preview Navigation
Live preview Navigation
Sliding Underline Nav
Each link grows its own underline from the left as the pointer passes over it.