CSS clip-path generator
Build polygon, circle, ellipse, or inset clip paths with a live preview. Drag points on the canvas or edit percentages in the table.
~~~
Shape
Preview
Controls
| # | X % | Y % | |
|---|---|---|---|
~~~
Generated CSS
~~~
About this tool
clip-path masks an element to a shape. Polygons use percentage coordinates relative to the box. Circle and ellipse use theat keyword for placement. Inset clips from the edges inward, with optional rounded corners.
URL query params store your shape for sharing — short enough for bookmarks, never for pasted content.
~~~