Live preview Navigation
Wipe Left Reveal Nav
Active tab revealed by a leftward wipe that sweeps across the nav.
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.
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
Chassis Throughput Progress
A transfer rate panel that plots fourteen recent samples against a dashed average line.
Live preview Progress
Coral Comet Progress
The fill ends in a pulsing comet head that keeps glowing at the leading edge of the track.
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
Organza Sway Progress
Two sine wave surfaces roll in opposite directions over a liquid level held at fifty five percent.
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 Sliders
Amber Glow Slider
A dim ember rail runs beneath a knob that breathes its own pulsing amber halo.
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
Bloom Vapor Slider
A striped sunset disc rises behind chrome lettering while a neon grid runs to the horizon.
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
Coil Mono Slider
Pure black and pure white only: the filled span is wound with a tight diagonal coil.
Live preview Sliders
Copper Diamond Slider
A tilted copper lozenge glides on a thin wire and opens up when hovered.
Live preview Sliders
Dynamo Decibel Meter
A segmented LED ladder runs green to red above a rail scaled in decibels down to silence.
Live preview Sliders
Gleam Zigzag Slider
Saw toothed yellow teeth form the rail while a diagonal gleam wipes across the panel.
Live preview Sliders
Meadow Star Rating
A five-step rating rail whose amber fill stops exactly where the lit stars above run out.
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
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
Drift Light Leak Tabs
A warm film light leak drifts across the panel each time a different tab is opened.
Live preview Tabs
Flint Sideline Tabs
A left hand rail marks the active row and the whole label steps inward.
Live preview Tabs
Forge Numbered Tabs
Each tab carries a numbered disc that turns white hot when it is opened.
Live preview Tabs
Frost Underline Tabs
A frosted tab bar where a glowing underline glides beneath the active label.
Live preview Tabs
Lattice Unit Tabs
A unit switcher on a lattice grid where the reading flips over on each change.
Live preview Tabs
Mica Hairline Tabs
Uppercase spaced labels over a single hairline that glides between them.
Live preview Tabs
Monsoon Two Column Panel Tabs
The panel is split in two: a rainfall figure on the left, the reading on the right.
Live preview Tabs
Orbit Neumorphic Tabs
Soft moulded keys press inward and a pale light keeps orbiting the chosen one.
Live preview Tabs
Pylon Filter Tabs
A pylon mast rises over the active filter and the chip list underneath swaps.
Live preview Tabs
Ridge Step Form Tabs
A three step wizard where diamond nodes light up and a dotted ridge links them.
Live preview Tabs
Shaft Bottom Bar Tabs
The tab strip sits under the panel and a shaft pin rises into whichever is open.
Live preview Tabs
Spiral Halftone Tabs
A printed dot screen where the panel turns into place as the halftone rotates behind it.
Live preview Tabs
Topaz Terminal Tabs
A small terminal window whose tab strip switches monospace panes with a blinking caret.
Live preview Tabs
Tundra Theme Picker Tabs
Swatch tabs repaint the preview card below instead of swapping its content.
Live preview Tabs
Willow Hover Preview Tabs
Hovering grows a faint half underline first, so the click only completes the line.
Live preview Tables
Chassis Permission Grid
A role by permission grid where every cell is a tiny three position switch drawn in pure CSS.
Live preview Tables
Fjord Heatmap Cells
Cell tint density encodes the value so the whole table reads as a small heat map.
Live preview Tables
Lagoon Empty State
When the query returns nothing the table falls back to a dashed panel that breathes.
Live preview Tables
Willow Header Icons
Each header label is prefixed by a small icon drawn purely from borders and shadows.
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Chrome Metallic
Polished chrome metallic text with bright reflection and dark base.
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Count Up Roller
A single digit cycling 0 through 9 on a stepped roller, like an odometer.
Live preview Text
Live preview Text
Live preview Text
Cyberpunk Glitch
Yellow cyberpunk text with red/cyan offset and periodic skew glitch.
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Browse by category
ButtonsCardsLoadersTextBackgroundsCheckboxesTogglesHover EffectsBadgesFormsNavigationTooltipsAccordionsAlertsAvatarsModalsProgressSlidersTabsTablesTimelinesMarquees