CSS clip-path Generator
Shapes for clip-path — triangle, hexagon, star, arrow, chevron, custom points, circle, ellipse, inset with round — as percentages, with preview and SVG path.
The clip-path value and CSS rule, a preview of the shape, the vertex list, and the equivalent SVG path in a 0–100 viewBox for tools that want a path.
Example: A hexagon is polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); a 5-point star has 10 vertices; circle(40% at 30% 50%) and inset(10% round 8%) come straight from the fields.
Basic shapes
in percentages.
How the shapes are written, how rotation and custom points work, and what the SVG path is for.
The functions
polygon() lists vertices as x y pairs; circle() and ellipse() take radii and a centre; inset() takes an offset from each edge and an optional round radius. Percentages are resolved against the element's own box, so one value fits any size — the presets are drawn on a 0–100 square and stretch with the element (a hexagon on a wide box becomes a wide hexagon).
Rotation and custom points
Rotation turns the polygon's vertices about the centre (50 %, 50 %); vertices that leave the box are kept in the value and simply clipped by the element, and the page says so. Custom points are your own x y pairs in percent, at least three. Whole-percent rounding keeps the CSS short; switch to two decimals for stars and rotated shapes.
SVG path
The same vertices written as an SVG path in a 0 0 100 100 viewBox, for a clipPath element, an icon or a design tool — for circles and ellipses as two arcs, for inset as a rectangle (the round radius is not carried). Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- CSS Masking Module Level 1 basic shapes: polygon(), circle(), ellipse(), inset() with round; percentages resolve against the element box
Last reviewed 22 September 2026. How results are checked: How we verify.