#clip-path CSS effects

9 free, pure-CSS effects match the "clip-path" tag. Each is copy-ready and needs no library or build step.

A CSS-cut gem shape that fills with an emerald gradient and flips when checked.

A hexagon outlined with a rotating rainbow conic gradient.

A diamond-shaped top spinning fast while wobbling off-axis.

Cyberpunk text glitching with red and cyan RGB-split layers.

A bright outline draws across the text from left to right and resets.

Color slides in from left to reveal the text with a clip-path mask wipe.

A colored copy of the text splits into top and bottom halves sliding apart.

Text splits horizontally — top half dark, bottom half colored — and swaps on hover.

Speaker sound waves pulse out when unmuted and a red slash appears when muted.

Popular tags