CSS Clip-Path Generator
🔒ブラウザ内処理
Create polygon, circle, ellipse, and inset clipping paths visually and copy the CSS. Drag handles to edit freely. Runs entirely in your browser.
Presets
Points (3 / 20)
Click an edge to add a point · Double-click a handle to delete
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 run entirely in your browser. Nothing is uploaded or transmitted.
How do I add more polygon points?
Click on any edge (the line between two handles) and a new point will be inserted at that position. Up to 20 points can be added.
How do I delete a polygon point?
Double-click on a handle (white circle) to delete it. A minimum of 3 points is required, so deletion is disabled when only 3 remain.
What is the difference between circle and ellipse?
A circle uses a single radius to create a perfect circle. An ellipse lets you set X and Y radii independently, allowing wide or tall oval shapes.
What does the Round setting do for inset?
Round adds a border-radius-like curve to the corners of the rectangular clipping region. 0% means sharp corners; higher values produce rounder corners.