Back to Free Tools
FREE TOOLS
CSS Clip Path Shape Generator
Build CSS clip-path geometry for a circle, ellipse or polygon with explicit percentages.
Polygon x,y pairs or circle radius,cx,cy or ellipse rx,ry,cx,cy
css-clip-path-generator.json (complete report and generated source where applicable)
Browser only
Runs locally in your browser. Your files, pasted content and generated output are not uploaded. Reset clears this tool’s working data.
This tool needs JavaScript. If it does not load, refresh the page and try again.
How to use this tool
- Enter values using the displayed examples; observe the documented input shape and limits.
- Choose Calculate result. Review the complete JSON report and any generated source text it contains.
- Download result to save the complete report; copy the generated source member into your project when relevant. Reset restores examples and clears output.
Examples
Shape: polygon
Polygon x,y pairs or circle radius,cx,cy or ellipse rx,ry,cx,cy: 0,0
100,0
50,100
Limitations
- Polygon has 3–100 points, each within 0–100%. No SVG, arbitrary CSS or browser rendering.
- Maximum 100,000 UTF-16 units per field, 400,000 UTF-8 combined input bytes, 4 MiB output and 30 seconds in a local worker. Tool-specific bounds may be tighter.
- Generated snippets are source text inside the JSON download. They are never executed by this tool. Local inspection does not verify remote systems or establish standards certification.
Related tools
No items found.