CSS Clip Path Generator
Visual clip-path editor with shape presets and draggable points.
Drag the white handles on the preview to reshape the polygon.
Generated CSS
.box {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}Generate CSS clip-path Shapes
The clip-path property crops an element to a shape â polygons, circles, ellipses, or insets. This visual editor lets you start from a preset, drag the polygon points to fine-tune the shape, and copy the exact clip-path CSS.
Shape functions
- polygon() â any straight-edged shape
- circle() â a circle with radius and center
- ellipse() â an ellipse with two radii
- inset() â a rectangle inset from the edges
How to edit a polygon
Pick a preset, then drag the white handles on the preview to move each point. Add or remove points to build custom shapes. Values are percentages of the element's box.
Private & Processed Locally
The CSS is generated in your browser; nothing is uploaded. A -webkit- prefix is included for Safari support.
Frequently Asked Questions
Common questions about the CSS Clip Path Generator.
What shapes can it make?
polygon(), circle(), ellipse(), and inset() clip-path shapes, with presets like triangle, hexagon, and star.
How do I edit a polygon?
Pick a preset, then drag the white handles on the preview to move each point, or add and remove points.
Is it private?
Yes, the CSS is generated entirely in your browser.