Home / Dev Tools / CSS Tools / CSS Clip Path Generator

CSS Clip Path Generator

Design and generate CSS clip-path shapes directly in your browser.
Shape
Circle Settings
CSS Output

Runs entirely in your browser — nothing is sent to a server. clip-path has good support in modern browsers but limited support in older ones (notably older Edge/IE); check caniuse.com if you need to support legacy browsers.

Frequently Asked Questions

Triangle, trapezoid, parallelogram, pentagon, hexagon, octagon, star, cross, message bubble, arrow-left, arrow-right, plus a custom polygon option for arbitrary point coordinates.

clip-path has good support in modern browsers but limited support in older ones (notably older Edge/IE) — check caniuse.com if you need to support legacy browsers.

Select "Custom Polygon" and enter your own comma-separated point coordinates directly.

Found this useful? Share it:
Quick Feedback