CSS Clip-path Generator
Create custom CSS polygon clip paths with draggable points, ready-made shapes and precise percentage coordinates. Preview and copy your CSS instantly.
1 Shape controls
Three points minimumAdd point inserts a vertex between the selected point and the next one. You can also use Backspace or Delete on a focused point.
2 Live polygon
Drag the circular handlesArrow keys move a focused point by 1%; hold Shift for 5%.
Your file is processed on this device and never uploaded.
How it works
From input to output,
in a few clicks.
Shape a card, image or decorative element without an image editor. Start from a polygon preset, refine every vertex visually, and export a responsive clip-path declaration that scales with your element.
- Choose a starting shapeSelect one of eight polygon presets, from a simple triangle to a ten-point star.
- Refine the verticesDrag points on the canvas, use arrow keys for small adjustments, or enter exact X and Y percentages. Add or remove points as needed.
- Copy the CSSThe polygon declaration updates with every edit. Copy it into your stylesheet and apply it to any HTML element.
Good to know
Frequently asked questions
Why does this generator use percentages?
Percentage coordinates are relative to the element’s reference box, so the same polygon can adapt to different widths and heights without recalculating pixel values.
How many points can a CSS polygon have?
A polygon needs at least three points to enclose an area. This editor keeps that minimum in place and lets you add more vertices for detailed silhouettes.
Can I use clip-path on images and containers?
Yes. Clip-path works on many HTML and SVG elements in modern browsers. The clipping region hides parts visually but does not remove them from the document layout.
Is my shape sent to a server?
No. Point editing, preview rendering and CSS generation all happen locally in your browser with no external service.