Utilities
CSS clip-path Maker
Drag the colored handles to sculpt a polygon over your image. Click a preset from the sidebar and copy the generated clip-path CSS.
Drag the colored nodes to edit the polygon
50.0% 2.0%
91.6% 26.0%
91.6% 74.0%
50.0% 98.0%
8.4% 74.0%
8.4% 26.0%
Tip: apply this style to any element. Because points are in %, the clip adapts to the element size.
All computation runs in your browser; your images aren’t uploaded anywhere.
How to use
- Pick a shape from the left sidebar (or start with Rectangle). You can add/remove points anytime.
- Upload an image (or paste a URL). The polygon clips whatever is underneath.
- Drag the colored handles to adjust each vertex. Points are in percentage space, so your CSS is responsive.
- Use the “Insert midpoint” ➕ on any point to add another vertex between it and the next one; use ➖ to remove points (minimum 3).
- Copy the CSS from Generated CSS and paste into your stylesheet. Apply it to any element with the same aspect/size.