Live preview Accordions
Rivet Downloads Accordion
Build groups punch open a format list where each row shows its extension and weight.
#clip-path CSS effects
71 free, pure-CSS effects match the "clip-path" tag. Each is copy-ready and needs no library or build step.
Live preview Checkboxes
Hourglass Checkbox
The glass rotates half a turn and the sand settles into the lower bulb.
Live preview Progress
Origami Cusp Progress
Eight paper facets alternate their crease direction and the five set folds carry the colour.
Live preview Avatars
Gear Crown Leader Avatar
A clipped crown sways above the leader avatar and a rank pill hangs beneath it.
Live preview Avatars
Meadow Notched Corner Avatar
A square corner is clipped out of the avatar so a plan chip nests perfectly inside.
Live preview Avatars
Rivet Achievement Star Avatar
A clipped star medal twinkles at the corner and a small counter reports earned awards.
Live preview Checkboxes
Scanline Checkbox
A bright scan line sweeps down the box and leaves solid colour behind it.
Live preview Loaders
Hexagon Spinner
A hexagon outlined with a rotating rainbow conic gradient.
Live preview Loaders
Spinning Top
A diamond-shaped top spinning fast while wobbling off-axis.
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
Wisp Sparkle Slider
Four point sparkles twinkle out of turn around a violet rail set on a deep night plate.
Live preview Text
Outline Draw
A bright outline draws across the text from left to right and resets.
Live preview Text
Mask Reveal Text
Color slides in from left to reveal the text with a clip-path mask wipe.
Live preview Text
Slice Reveal
A colored copy of the text splits into top and bottom halves sliding apart.
Live preview Accordions
Conduit Privacy Accordion
Privacy rows pair an explanation fold with a switch, and the required one stays locked.
Live preview Accordions
Flint Triangle Accordion
A clipped triangle marker pivots downward when its section takes the focus.
Live preview Accordions
Forge Lessons Accordion
Course chapters list their lessons with a play wedge, runtime and a watched state.
Live preview Accordions
Glacier Icons Accordion
Opening a section uncovers a four cell grid of small geometric icon tiles.
Live preview Accordions
Mica Grid Accordion
Grid template rows grow from zero while a mica flake glints beside the label.
Live preview Accordions
Pylon Tasks Accordion
Project phases fold open onto tick boxes that strike their own task line through.
Live preview Accordions
Quartz Clip Accordion
The panel is wiped open from the left edge with an animated clip path.
Live preview Accordions
Wander Bauhaus Accordion
Primary colour circle, square and triangle mark rows that grow from zero.
Live preview Alerts
Obsidian Clip Alert
A clip path notch cuts the top right corner and a diagonal accent lights the seam.
Live preview Avatars
Kiln Folded Corner Member Panel
A wide member panel with a clipped folded corner, a divider and a shift counter.
Live preview Avatars
Obsidian Medal Frame Avatar
Two laurel arcs orbit the portrait above a clipped award ribbon tail.
Live preview Avatars
Onyx Hexagon Avatar
A clip-path hexagon frame wraps a smaller hexagon holding the initials.
Live preview Avatars
Shaft Split Disc Duo Avatar
One disc is cut into two clipped halves so a shared project reads as a single mark.
Live preview Avatars
Tundra Pentagon Frame Avatar
A pentagon frame sways slowly around a second pentagon holding the initials.
Live preview Avatars
Verge Circle In Square Mask
A circular clip inside a square plate widens on hover until it fills the corners.
Live preview Badges
Tier Gem Badge
A faceted hexagonal gem cut with clip-path, sparkling on a slow loop.
Live preview Checkboxes
Brush Stroke Checkbox
A rough paint stroke sweeps across the tile with ragged edges left behind.
Live preview Checkboxes
Faceted Crystal Checkbox
A cut gemstone made of clipped facets catches the light when selected.
Live preview Checkboxes
Gem Shape Fill
A CSS-cut gem shape that fills with an emerald gradient and flips when checked.
Live preview Checkboxes
Origami Fold Checkbox
Two triangular flaps fold in from opposite corners and meet in the middle.
Live preview Checkboxes
Zipper Checkbox
A zipper pull travels along the track and closes the teeth behind it.
Live preview Modals
Cusp Sizing Modal
A halftone size guide opens through a clip aperture that widens from the centre without stretching its text.
Live preview Modals
Flint Spotlight Modal
A circular iris opens across the dialog while a spotlight gradient lights the scene.
Live preview Modals
Monsoon Release Modal
Release notes are uncovered by a curtain wiping downward while drizzle drifts over the header.
Live preview Modals
Pylon Expired Modal
A session timeout notice is revealed by a slanted edge sweeping across the panel.
Live preview Modals
Reef Video Modal
A player frame opens outward like a pair of curtains around a play badge and scrub bar.
Live preview Modals
Tide Language Modal
A locale chooser wipes open sideways over radio rows that mark the language in use.
Live preview Modals
Turbine Link Modal
Link sharing settings appear as two shutters part outward from the horizontal centre line.
Live preview Navigation
Chevron Breadcrumbs
Arrow-shaped crumbs interlock with clip-path and the trail brightens on hover.
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
Lumen Gleam Progress
A lamp throws a volumetric beam whose reach is the value, ending in a flickering lens flare.
Live preview Progress
Mosaic Orbit Progress
A hexagonal cell fills from its base instead of a circle while a small hex satellite orbits it.
Live preview Progress
Ochre Wander Progress
Sand runs out of a funnel in a thin stream and the grains wander down onto a growing heap.
Live preview Progress
Ratchet Segments Progress
Seven chamfered LED segments climb a green to red ramp with five of them currently driven.
Live preview Progress
Ruby Drop Progress
A download row with a bobbing arrow glyph, a transferred size read out and a ruby fill.
Live preview Progress
Tether Ruler Progress
An engraved calibration ruler with minor and major graduations under a dropped cursor.
Live preview Progress
Tundra Glass Progress
An hourglass built from two clipped triangles where the upper chamber drains as the lower one packs.
Live preview Progress
Turbine Charge Progress
An upright cell whose electrolyte keeps climbing behind a bolt glyph while it charges.
Live preview Sliders
Flint Triangle Slider
A clipped flint arrowhead points down at the rail like a ruler marker.
Live preview Sliders
Gear Ratio Selector
A toothed rail carries a hex-nut handle across eight final-drive ratios listed underneath.
Live preview Sliders
Pearl Volume Slider
A speaker glyph drawn in CSS sits beside the rail with a numeric readout.
Live preview Sliders
Tether Trim Axis
A signed ruler runs from minus one hundred to plus one hundred with a bright zero detent.
Live preview Sliders
Wander Deco Slider
Gold hairlines rule a lacquered black plate with a faceted lozenge riding the gilt rail.
Live preview Tabs
Lull Origami Tabs
Folded paper facets where the panel drops open on a crease along its top edge.
Live preview Tabs
Sway Terminal Tabs
A green phosphor console whose output drops open like a curtain behind the scanlines.
Live preview Tabs
Wisp Vellum Tabs
Translucent vellum sheets stacked in layers, each one wiped open from the left.
Live preview Tables
Glide Flight Board
A departure board where a small jet glides along the dotted route drawn between two airports.
Live preview Tables
Verge Grade Shields
Letter grades sit inside clipped shield badges that cool down as the score nears the pass line.
Live preview Text
Glitch RGB Split
Cyberpunk text glitching with red and cyan RGB-split layers.
Live preview Text
Split Color Hover
Text splits horizontally — top half dark, bottom half colored — and swaps on hover.
Live preview Timelines
Delta Hiring Pipeline
Hexagonal stage badges carry the funnel from applied down to a single offer.
Live preview Timelines
Fjord Release History
Version tags with a notched left edge hang under every release headline.
Live preview Timelines
Jade Roadmap Timeline
Three jade chevrons interlock into a roadmap strip labelled by quarter.
Live preview Timelines
Pulse Vows Timeline
A clipped heartbeat silhouette beats above three milestones of one relationship.
Live preview Timelines
Vault Diploma Timeline
Certificates line up behind embossed wax seals and the one still pending loses its colour.
Live preview Timelines
Zenith Ascent Timeline
Growth milestones climb a slope towards the summit where the final marker keeps flaring.
Live preview Toggles
Speaker Mute / Unmute
Speaker sound waves pulse out when unmuted and a red slash appears when muted.