CSS Clip-Path Generator#

Generate clip-path CSS values for circle, ellipse, polygon, and inset shapes, with optional -webkit- vendor prefix.

Input#

• Shape type: circle | ellipse | polygon | inset (default circle)
• Shape-specific parameters:
  • circle: radius % (default 50), cx % (default 50), cy % (default 50)
  • ellipse: rx % (default 50), ry % (default 35), cx % (default 50), cy % (default 50)
  • inset: top %, right %, bottom %, left % (default all 10)
  • polygon: list of x% y% point pairs (at least 3 points)
• Vendor prefix: boolean (default false)

Output#

• clip-path: <value>;
• Optionally -webkit-clip-path: <value>; if vendor prefix requested

Instructions#

1. Parse the user's request for shape type and parameters.
2. Build the clip-path value:
   • circle: circle(<radius>% at <cx>% <cy>%)
   • ellipse: ellipse(<rx>% <ry>% at <cx>% <cy>%)
   • inset: inset(<top>% <right>% <bottom>% <left>%)
   • polygon: polygon(<x1>% <y1>%, <x2>% <y2>%, ...) — join all points with ,
3. If the user mentions a named preset shape, map to its polygon points:
   • Triangle: polygon(50% 10%, 90% 90%, 10% 90%)
   • Pentagon: polygon(50% 5%, 95% 35%, 80% 90%, 20% 90%, 5% 35%)
   • Hexagon: polygon(50% 5%, 90% 25%, 90% 75%, 50% 95%, 10% 75%, 10% 25%)
   • Star: polygon(50% 5%, 61% 35%, 95% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 5% 35%, 39% 35%)
   • Arrow: polygon(5% 35%, 60% 35%, 60% 10%, 95% 50%, 60% 90%, 60% 65%, 5% 65%)
4. Output clip-path: <value>;
5. If vendor prefix requested, also output -webkit-clip-path: <value>; above the standard property.
6. Include a short usage example showing the property applied to a .element class.

Options#

• shape: circle | ellipse | polygon | inset — default circle
• radius: 0–50 — default 50 (circle only)
• cx: 0–100 — default 50
• cy: 0–100 — default 50
• rx: 0–50 — default 50 (ellipse only)
• ry: 0–50 — default 35 (ellipse only)
• top / right / bottom / left: 0–50 — default 10 (inset only)
• vendorPrefix: true | false — default false

Examples#

Input: "Circle clip path, 40% radius, centered" Output:

css

clip-path: circle(40% at 50% 50%);

Input: "Triangle clip path" Output:

css

clip-path: polygon(50% 10%, 90% 90%, 10% 90%);

Input: "Ellipse clip, 60% wide 40% tall, centered, with webkit prefix" Output:

css

-webkit-clip-path: ellipse(60% 40% at 50% 50%);
clip-path: ellipse(60% 40% at 50% 50%);

Input: "Inset rectangle 15% margin all sides" Output:

css

clip-path: inset(15% 15% 15% 15%);

Error Handling#

• If polygon has fewer than 3 points, inform the user and ask for at least 3 coordinate pairs.
• If any percentage is outside 0–100, clamp it and note the adjustment.
• If shape type is unrecognized, default to circle and notify the user.
• For Safari compatibility, remind the user to add the -webkit-clip-path vendor prefix (or set vendorPrefix to true).