Clip Path Generator API

Build a CSS clip-path: polygon from points, circle, ellipse or inset, or a named preset shape (triangle, hexagon, star, arrows…). All values are percentages.

POST /api/v1/tools/clip-path-generatorMCP clip_path_generatorDesign & Colour

Make CSS clip-path shapes: start from triangles, hexagons, stars, arrows and more, drag the points or type exact values, and copy the clip-path CSS.

Input

Send these as a JSON object. Unknown fields are rejected.

shape: Shape kind; decides which other fields are used. (string, one of polygon, circle, ellipse, inset, default "polygon")
points: polygon: points as "x y" percentages, one per line or separated by commas, e.g. "50 0, 100 100, 0 100". 3 to 40 points, each -50 to 150. (string, up to 2000 characters)
radius: circle: radius in %. (number, 0 to 100, default 50)
rx: ellipse: horizontal radius in %. (number, 0 to 100, default 50)
ry: ellipse: vertical radius in %. (number, 0 to 100, default 35)
cx: circle and ellipse: centre X in %. (number, -50 to 150, default 50)
cy: circle and ellipse: centre Y in %. (number, -50 to 150, default 50)
top: inset: top inset in %. (number, 0 to 100, default 10)
right: inset: right inset in %. (number, 0 to 100, default 10)
bottom: inset: bottom inset in %. (number, 0 to 100, default 10)
left: inset: left inset in %. (number, 0 to 100, default 10)
round: inset: corner rounding in %. (number, 0 to 50, default 0)
preset: A named shape instead of the other fields. (string, one of Triangle, Trapezoid, Parallelogram, Rhombus, Pentagon, Hexagon, Octagon, Star, Left arrow, Right arrow, Left chevron, Right chevron, Message, Cross, Circle, Ellipse, Inset)

Try it in the browser JSON Schema Get an API key

curl https://pithlab.com/api/v1/tools/clip-path-generator \n  -H "Authorization: Bearer $PITHLAB_KEY" \n  -H "Content-Type: application/json" \n  -d '{"shape":"polygon","points":"50 0, 100 100, 0 100"}'

Example response

{
  "ok": true,
  "result": {
    "value": "polygon(50% 0, 100% 100%, 0 100%)",
    "css": "clip-path: polygon(50% 0, 100% 100%, 0 100%);"
  }
}