-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Drag the handles on the preview to reshape the path. Click "Add Point" to add more vertices for custom shapes. Coordinates are clamped to 0–100%.
CSS clip-path, defined in the CSS Masking Level 1 specification, masks an element's visible area to an arbitrary geometric shape. Polygon clip-paths create multi-point shapes using percentage-based coordinates. Circle and ellipse clip-paths use the circle() and ellipse() functions. Common uses include angled hero sections, hexagonal image grids, diagonal section dividers, and custom button shapes. The coordinate system — percentages of the element bounding box — means shapes scale automatically with responsive layouts.
The generator maintains an array of coordinate pairs, each expressed as a percentage of the element's width and height. For polygon shapes, each pair represents a vertex of the polygon in order. The CSS polygon() function takes these pairs as space-separated x% y% values, comma-separated between vertices.
The visual canvas renders a preview element with a colored fill and overlays draggable handles at each polygon vertex. As you drag a handle, its coordinates update in real time and the polygon re-clips immediately. The coordinate inputs below the canvas let you type precise values when visual dragging is insufficient for fine-grained control.
Preset shapes (triangle, arrow, hexagon, star, cross) are defined as normalized coordinate arrays that are immediately available. Circle and ellipse shapes use the circle() and ellipse() CSS functions with at syntax for positioning the center point.
The output includes both clip-path and -webkit-clip-path for backward compatibility, though -webkit-clip-path is only needed for Safari versions before 12.
A developer creates a diagonal section divider between a hero and content area by applying a polygon clip to a background-colored div without any SVG or image files.
A frontend engineer builds a hexagonal grid for a team photo layout by applying a hexagon clip-path to each image element.
A designer implements an angled hero section from a Figma mockup by matching the polygon coordinates to the design's oblique cut angle.
A developer creates a star-shaped badge element for a pricing table using the star polygon preset and CSS transitions for a pulse animation on hover.
Pick a preset shape — triangle, hexagon, star, circle, or custom polygon
Drag the control points on the preview to adjust the shape
Fine-tune coordinates with the editable point inputs below
Copy the generated CSS code with one click
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29