CSS `clip-path` Polygon Coordinate Extractor
Click, drag, and edit polygon points to generate responsive CSS
clip-path coordinates.
Extractor
Polygon stage
Click the stage to add points. Drag handles to adjust them. Use arrow keys when a point handle is focused.
Points
Results
Metrics
Introduction
CSS clip-path: polygon() allows non-rectangular clipping, but writing
polygon coordinates by hand is tedious. This extractor lets you define points visually
and export responsive percentage coordinates.
How it works
Click the stage to add points. Drag handles to adjust them. The tool converts point positions into percentage coordinates and generates a CSS polygon value.
- Coordinates are calculated as percentages.
- Uploaded images are processed locally.
- Point order can be reversed.
- The clip preview updates as points change.
How to use
- Optionally upload an image to trace.
- Click the stage to add polygon points.
- Drag handles or edit point percentages.
- Generate the clip-path value.
- Copy the CSS snippet.
Practical example
A diamond clip can be expressed as:
clip-path: polygon(50% 5%, 95% 50%, 50% 95%, 5% 50%);Use cases
- Clipping hero images.
- Creating angled section dividers.
- Building custom image masks.
- Prototyping creative layouts.
- Extracting coordinates from design mockups.
Best practices
- Use percentage coordinates for responsive layouts.
- Keep polygon point counts as low as possible.
- Test clipped content at multiple breakpoints.
- Ensure meaningful alt text remains available.
- Avoid clipping essential text or controls.
Common mistakes
- Using pixel coordinates that break responsiveness.
- Adding points in the wrong order.
- Clipping away meaningful content.
- Using too many points for simple shapes.
- Forgetting vendor prefixes where needed.
Limitations
- The tool does not automatically detect object edges.
- Very complex shapes may require many points.
- Preview clipping depends on browser support.
- Uploaded images are not optimized or compressed.
Browser compatibility
Modern browsers support clip-path with basic shapes. Include
-webkit-clip-path if you need broader legacy support.
FAQ
Is my image uploaded?
No. Images are handled locally in your browser.
Why use percentages instead of pixels?
Percentages scale with the element, making the clipping shape more responsive.
Can I edit point order?
Yes. Use the reverse order button, or remove and re-add points in the desired sequence.
Does it support circle or ellipse clipping?
This tool focuses on polygon coordinates. Circle and ellipse shapes use different CSS syntax.