CSS Clip Path Generator
Generate clip-path CSS for common geometric shapes.
Clip elements into shapes
clip-path crops an element to a shape — a polygon, circle, or inset rectangle — which is how you get angled sections, hexagon avatars, and cut-corner cards without extra markup or images. This generator builds the clip-path value with a live preview.
Writing polygon coordinates by hand is painful, so shaping it visually and copying the result is far faster. Pick a shape, adjust it, and drop the clip-path CSS onto any element to crop it cleanly.
Copy-ready clip-path
The polygon() points are expressed as percentages so the shape scales with the element. It is generated in your browser with nothing uploaded.
Frequently asked questions
Which shapes are included?
Four presets: a triangle and a parallelogram built with polygon(), a circle(), and an inset() rectangle with rounded corners.
Does clip-path affect clicks?
Yes. Areas outside the clip path are not clickable or hoverable, so a clipped button only responds inside its visible shape.
How do I make a custom polygon?
Edit the polygon() points in the output. Each pair is an x and y percentage of the element box, listed clockwise, for example polygon(0 0, 100% 0, 100% 80%, 0 100%) for a slanted bottom edge.
Related tools
Practical utilities for front-end design and implementation work.