CSS Clip-Path Generator
🔒ブラウザ内処理
Build polygon, circle, ellipse, and inset clipping paths visually and copy the CSS. Drag vertices to edit freely. Runs entirely in your browser.
Presets
Vertices (3 / 20)
Click an edge to add a vertex · Double-click a handle to remove it
1x: 50%y: 0%
2x: 100%y: 100%
3x: 0%y: 100%
Preview
CSS
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
よくある質問
Is my data sent to a server?
No. All clip-path calculations happen entirely in your browser.
How do I add polygon vertices?
Click an edge (the line between two vertices) to insert a new vertex at that position. Up to 20 vertices are supported.
How do I remove a polygon vertex?
Double-click a handle (white circle) to remove it. A minimum of 3 vertices is required, so removal is disabled at 3.
What is the difference between circle and ellipse?
circle uses a single radius and produces a perfect circle. ellipse lets you set the X and Y radii independently for wide or tall ovals.
What does round do in inset?
It rounds the corners of the rectangular clip. 0% keeps them square; higher values round them, similar to border-radius.