Live preview Navigation
Featured
Most popular CSS effects
The library's 10,238 effects, ordered by views. They are all pure CSS: copy, paste, and use them with no library or build step.
Most viewed effects
Live preview Navigation
Live preview Navigation
Gradient Flow Navbar
Navbar with an animated gradient background flowing across links.
Live preview Navigation
Live preview Navigation
Jello Wiggle Navbar
Links wiggle like jello with a skew-based animation on hover.
Live preview Navigation
Live preview Navigation
Radial Burst Menu
Items burst outward radially from a center trigger with staggered timing.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Step Bar Fill Nav
Horizontal stepper where each segment fills a progress bar on hover.
Live preview Navigation
Underline Segmented Control
Segmented control with an underline indicator that slides between items.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Expanding Sidebar Rail
A narrow icon rail widens on hover and slides the labels out beside each icon.
Live preview Navigation
Slant Perspective 3D Navbar
Nav with a perspective tilt creating a 3D slanted look.
Live preview Navigation
Live preview Navigation
Split Line Gradient Flow Navbar
Nav links separated by animated gradient line dividers.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Sticky Note Curl Nav
Nav items styled as sticky notes with curling corners on hover.
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
Text Cinematic Glow Navbar
Active link has a wide cinematic soft-glow halo behind the text.
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 Shadow Dance Navbar
Hovered links perform a layered text-shadow dance animation.
Live preview Navigation
Uppercase Grow Navbar
Hovered link transforms to uppercase with smooth spacing growth.
Live preview Navigation
3D Tilt Hover Navbar
Each link tilts in 3D space responding to hover with depth perspective.
Live preview Navigation
Live preview Navigation
Chevron Collapsible Treeview
Tree menu where chevrons rotate as the group expands on hover.
Live preview Navigation
Connector Line Treeview
Tree menu with L-shaped connector lines linking parents to children.
Live preview Navigation
Live preview Navigation
Vertical Tab Right Arrow Pointer
Vertical tabs with a right-pointing arrow on the active item.
Live preview Navigation
Vertical Tab Left Border Active
Vertical tabs with a glowing left border on the active item.
Live preview Navigation
Vertical Tab Circle Bg Active
Vertical tabs with a circular active background indicator.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Vertical Tab Flip Card
Vertical tabs that flip in 3D when active, revealing content.
Live preview Navigation
Live preview Navigation
Vertical Tab Neon Active Line
Vertical tabs with a pulsing neon active line indicator.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Vertical Tab Underline Slide
Vertical tab nav where the active underline slides between items.
Live preview Navigation
Diagonal Wipe Reveal Nav
Diagonal wipe transitions across the nav when hovering different items.
Live preview Navigation
Wipe Left Reveal Nav
Active tab revealed by a leftward wipe that sweeps across the nav.
Live preview Navigation
Wobble Jiggle Navbar
Links wobble-jiggle on hover using a keyframe animation.
Live preview Progress
Amber Sheen Progress
A polished amber fill with a light sheen that sweeps across it on a loop.
Live preview Progress
Anvil Stroke Progress
A piston head runs the bore back and forth while the charge ahead of it is compressed.
Live preview Progress
Bearing Heat Progress
A thermal band read from a cold to hot ramp with a glowing knob parked at the current reading.
Live preview Progress
Blush Bloom Progress
Six petals ring a pulsing golden heart and the four opened ones report the current share.
Live preview Progress
Brass Thread Progress
A hairline track with rounded caps whose warm brass fill breathes between six and eighty four percent.
Live preview Progress
Carmine Zenith Progress
A triangle fills from its base toward the apex with a dashed rule pinned at the reached level.
Live preview Progress
Chassis Throughput Progress
A transfer rate panel that plots fourteen recent samples against a dashed average line.
Live preview Progress
Flange Vumeter Progress
An analogue volume unit meter whose needle keeps flicking across a scale into the red end.
Live preview Progress
Glacier Wizard Progress
A wizard header with five numbered nodes sitting on one continuous rail that fills to the live step.
Live preview Progress
Lagoon Topbar Progress
The hairline page loader that lives on top of a browser frame and stalls near the end.
Live preview Progress
Marble Ring Progress
A thick conic gradient ring cut out with a mask, holding a static seventy two percent sweep.
Live preview Progress
Organza Sway Progress
Two sine wave surfaces roll in opposite directions over a liquid level held at fifty five percent.
Live preview Progress
Pylon Cogwheel Progress
A toothed wheel turns against a smaller counter rotating one while a ring holds the value.
Live preview Progress
Sepia Echo Progress
A monochrome engraving plate where dense cross hatching marks the value under a ghosted numeral.
Live preview Progress
Socket Squeeze Progress
A compression read out where the packed lane keeps collapsing against the raw lane above it.
Live preview Progress
Stark Dash Progress
A brutalist meter with a hard offset shadow, three pixel outlines and a dashed leading edge.
Live preview Progress
Tulle Wisp Progress
Seven motes of stardust lift off the filled span and fade away as they rise into the dark.
Live preview Progress
Valley Ticks Progress
Twelve rotated tick marks form a circular counter with eight of them lit around a centre count.
Live preview Progress
Valve Toolchain Progress
Three build stages chained by chevrons, each carrying its own meter and the live one still filling.
Live preview Progress
Violet Kindle Progress
A jagged discharge path where the charged section is stroked bright and keeps sparking unevenly.
Live preview Sliders
Arc Memphis Slider
Confetti dots, a tilted label chip and a beam of bars frame a candy coloured control.
Live preview Sliders
Basalt Square Slider
Hard-cut square handle on a heavy basalt bar with no rounded corners.
Live preview Sliders
Chassis Steering Feel
A CSS steering wheel turns as the pointer arrives while the rail sets lock-to-lock travel.
Live preview Sliders
Copper Diamond Slider
A tilted copper lozenge glides on a thin wire and opens up when hovered.
Live preview Sliders
Cusp Split Slider
The card, the rail and even the handle are cut in half between a cool and a warm side.
Live preview Sliders
Gleam Zigzag Slider
Saw toothed yellow teeth form the rail while a diagonal gleam wipes across the panel.
Live preview Sliders
Mica Dotted Slider
A row of mica flecks forms the rail while a glass lens slides over them.
Live preview Sliders
Nickel Industrial Slider
A heavy knurled nickel grip sits in a bevelled channel like a workshop control.
Live preview Sliders
Pulse Brutal Slider
Raw brutalist panel with a four pixel ink frame, hard offset shadow and a flashing status tag.
Live preview Sliders
Pylon Shadow Depth
A standing block casts a shadow that keeps stretching and pulling back over its floor.
Live preview Sliders
Shaft Minute Timer
A ticking CSS clock face sits beside a rail that dials the countdown in five minute steps.
Live preview Sliders
Spiral Mist Slider
Two blurred conic clouds breathe behind the rail and leave a soft aura around the knob.
Live preview Sliders
Sway Zen Slider
Washi paper, one vermilion stroke and a single ink hairline with a lone red disc on it.
Live preview Sliders
Verge Toon Slider
Fat ink outlines, flat candy fills and a speech bubble tag give a comic panel feel.
Live preview Sliders
Wisp Sparkle Slider
Four point sparkles twinkle out of turn around a violet rail set on a deep night plate.
Live preview Tabs
Aurora Bottom Dock Tabs
A mobile bottom navigation dock where the chosen icon lifts and glows aurora green.
Live preview Tabs
Brass Pill Tabs
A polished brass pill slides behind the labels while the panels cross fade.
Live preview Tabs
Caliper Region Tabs
A pair of caliper jaws slides along the bar and grips the active region.
Live preview Tabs
Canyon Month Tabs
Calendar month tabs painted in canyon strata, each opening its own week strip.
Browse by category
ButtonsCardsLoadersTextBackgroundsCheckboxesTogglesHover EffectsBadgesFormsNavigationTooltipsAccordionsAlertsAvatarsModalsProgressSlidersTabsTablesTimelinesMarquees