Clip Path Generator

Shaping Without Fighting Coordinate Math

• Drag before typing coordinates. Every handle on the preview maps directly to a point's x/y percentage — dragging toward the intended shape gets close in seconds, and the number fields stay available for landing on an exact value afterward.
• Add a point before trying to fake a curve with more corners manually. Inserting a new point on the longest edge, then nudging it, is far less error-prone than recalculating every existing coordinate by hand to make room for an extra corner.
• Keep animated shapes at a matching point count. A clip-path transition only works cleanly between two polygons with the exact same number of points in the same order — plan both states before building either one.
• Reach for circle() or ellipse() for anything that should have a true curve. A polygon can approximate a circle with enough points, but a real circle() function is simpler, smaller, and genuinely round at any size.

Features

Clipping Is Not Hiding

It's easy to assume clip-path works like display: none or opacity: 0 on the parts it cuts away, but the underlying element never actually shrinks, moves, or loses its place in the layout — its box model stays exactly what it would be unclipped, including how much space it reserves and how neighboring elements flow around it. What changes is purely what gets painted: anything outside the defined shape simply isn't drawn, and critically, isn't clickable or hoverable either, since the browser's hit-testing follows the clipped region too. This is exactly why a clip-path star or arrow shape only responds to clicks within its visible points, not across its full rectangular bounding box the way an unclipped element would.

The Corners Aren't Broken — They Were Never Part of the Shape

That behavior is genuinely useful for a lot of real interface work — a heavily-clipped decorative image that shouldn't intercept clicks meant for something layered underneath it, for instance — but it's also a common source of confusion the first time someone builds a clip-path button and finds the corners feel unresponsive to clicks. The corners aren't broken; they were never part of the shape in the first place, and a button relying on clip-path for its visual shape should generally keep its actual clickable target reasonably close to that visible outline rather than assuming the full rectangular box still responds.

Four Functions, Four Different Shapes of Problem

polygon() is the only one of the four that can draw an irregular, asymmetric outline — a star, an arrow, a message bubble — since it's defined purely as a sequence of straight-line points with no assumption about symmetry at all. circle() and ellipse() trade that flexibility for simplicity and genuine curvature: a true round or oval shape defined by just a radius (or two) and a center point, impossible to approximate as cleanly with straight polygon segments no matter how many points are used. inset() solves a narrower, more practical problem — trimming a rectangular element's edges inward, optionally with rounded corners — which is the right tool for cropping a photo's edges or creating a simple framed border effect, not for anything with genuine asymmetry.

Matching the Function to the Geometry, Not the Other Way Around

Picking between these four isn't really a matter of taste so much as matching the shape to what it's describing. Reaching for polygon() to build something that's actually a circle wastes a dozen points approximating a curve circle() draws exactly with three numbers; reaching for inset() to build an angular badge shape simply can't, since it has no concept of a diagonal edge at all. Starting from the mode that matches the shape's actual geometry, rather than defaulting to polygon() for everything because it's the most flexible option, keeps the resulting CSS shorter and easier to read later.

Why Adding a Point Is Harder Than It Looks By Hand

Manually inserting a new corner into an existing polygon() value means recalculating where that new point should sit relative to every point already there, then re-typing the entire comma-separated list in the correct order — miss the order and the shape doesn't just gain a corner, it can self-intersect in a way that's hard to diagnose from the raw coordinates alone. This generator's Add Point button sidesteps that by finding the longest existing edge automatically and inserting the new point at its midpoint, in the correct position in the sequence, so the shape immediately after adding a point looks identical to before except for one new draggable handle sitting exactly where it's needed.

A Shape Is Only Half the Job

A striking clip-path shape applied to a plain solid color often looks flatter than the same shape applied to something with more visual texture behind it — a gradient fill reads noticeably more dynamic through an angular polygon than a single flat color does, since the gradient's own direction interacts visually with the shape's edges. For a shape that needs to change on hover rather than sit static, matching point counts between the two states and pairing the transition with the animation builder for anything more elaborate than a simple two-state hover is the more reliable path, since clip-path interpolation between mismatched point counts has no defined browser behavior to depend on.

From a Dragged Shape to Production CSS

A typical path: start from a preset close to the intended silhouette, drag individual points to adjust proportions rather than rebuilding from a blank polygon, and use Snap to Grid once the rough shape feels right to land on tidier, more readable coordinate values in the final output. Mirror Horizontally is worth trying before manually re-dragging every point when a shape needs to face the opposite direction — an arrow or a speech bubble pointing the other way, for instance — since it flips the entire coordinate set in one click rather than needing each point repositioned individually. From there, the exported clip-path declaration drops directly into a stylesheet, ready to apply to whatever element needs the shape.

It's worth checking the shape at the actual size it'll render at in production before calling it done, not just at the preview's fixed dimensions. Because every coordinate here is a percentage of the element's own box, a shape that reads as a crisp, sharp-pointed star at 220px can look noticeably different once stretched across a 900px hero banner — thin points that felt fine small can look unexpectedly spindly once the same percentages are scaled up. A quick check in the real layout catches that kind of proportion mismatch far faster than reasoning about it from the coordinate numbers alone.

Frequently Asked Questions