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