Live preview Navigation
Color Ripple Hover Navbar
Color ripples outward from each link on hover with a radial gradient.
#gradient CSS effects
5,189 free, pure-CSS effects match the "gradient" tag. Each is copy-ready and needs no library or build step.
Effects tagged #gradient
Live preview Navigation
Coupon Clip Corner Nav
Nav items styled as coupons with clipped circular corners.
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
Curtain Fall Reveal Nav
Nav links revealed as a curtain falls downward on hover.
Live preview Navigation
Curtain Rise Reveal Nav
Nav links revealed as a curtain rises upward on hover.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
3D Left Drawer Navbar
Left drawer with 3D perspective slide revealing main nav beside it.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Gradient Border Navbar
Navbar with animated gradient border around active link.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Iris Aperture Zoom Nav
Iris aperture that zooms open to reveal nav links in the center.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Blurred Backdrop Modal Navbar
Centered modal nav over a heavily blurred colored backdrop.
Live preview Navigation
Glass Popup Modal Navbar
Glassmorphism modal popup nav with frosted translucent surface.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Circular Orbit Menu
Center button with menu items orbiting in a circle around it.
Live preview Navigation
Planet Rotation Menu
Center sun with planet items rotating around it on a continuous orbit path.
Live preview Navigation
Ring Spin Menu
Menu items arranged on a ring that continuously rotates with hover-pause.
Live preview Navigation
Solar System Menu
Solar system layout with planets on concentric orbit rings of different speeds.
Live preview Navigation
Dark Blurred Overlay Navbar
Dark overlay with heavy backdrop blur covering the page content.
Live preview Navigation
Bottom Sheet Handle Navbar
Bottom sheet with a draggable handle and pull-up indicator.
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
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
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
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
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
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
Live preview Navigation
Live preview Navigation
Live preview Navigation
Slant Gradient Flow Navbar
Slanted nav with an animated gradient background flow.
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 Half Divider Navbar
Nav split into two halves with a central vertical divider.
Live preview Navigation
Live preview Navigation