How does clip-path: polygon() work?

polygon() takes a comma-separated list of x% y% coordinate pairs, in order, and clips the element to the closed shape formed by connecting them. Anything outside that shape is invisible but still takes up layout space — clip-path only affects painting, not the box model.

Why do my dragged points sometimes make the shape look broken?

polygon() connects points in the order you list them, so dragging a point past its neighbors in the list — rather than physically 'inside' the shape — can make edges cross and the fill look self-intersecting. Reordering isn't exposed in this tool; instead, drag points to reasonable positions relative to their neighbors, or start from a preset closer to your target shape.

Can I animate a clip-path shape?

Yes — clip-path is animatable in modern browsers as long as both polygon() values being transitioned between have the exact same number of points in the same order. Define two point sets with matching lengths and transition or @keyframes between them for a morphing effect.

Does clip-path work in all browsers?

polygon() has full support in all current major browsers with no vendor prefix needed. If you need to support very old browsers, provide a fallback background-color or border-radius shape before the clip-path rule, since unsupported browsers will simply ignore clip-path and show the full box.

Is my shape design sent anywhere?

No — every point and the resulting CSS are computed and rendered entirely in your browser. Nothing is uploaded to a server.

CSS CLIP-PATH GENERATOR

Drag points on a live preview to build a clip-path polygon shape and copy the CSS.

Fill color

5 points — double-click the shape to add, double-click a point to remove

.clip-shape {
  width: 280px;
  height: 280px;
  background: #ff6a35;
  clip-path: polygon(50% 0%, 97.6% 34.5%, 79.4% 90.5%, 20.6% 90.5%, 2.4% 34.5%);
}

How to build a clip-path shape

1
Pick a starting shape: triangle, pentagon, hexagon, arrow, chevron, or message bubble.
2
Drag any point on the preview to reshape the polygon.
3
Double-click anywhere on the shape to insert a new point on the nearest edge, or double-click an existing point to remove it.
4
Pick a fill color and copy the generated clip-path CSS.

Questions

How does clip-path: polygon() work?: polygon() takes a comma-separated list of x% y% coordinate pairs, in order, and clips the element to the closed shape formed by connecting them. Anything outside that shape is invisible but still takes up layout space — clip-path only affects painting, not the box model.
Why do my dragged points sometimes make the shape look broken?: polygon() connects points in the order you list them, so dragging a point past its neighbors in the list — rather than physically 'inside' the shape — can make edges cross and the fill look self-intersecting. Reordering isn't exposed in this tool; instead, drag points to reasonable positions relative to their neighbors, or start from a preset closer to your target shape.
Can I animate a clip-path shape?: Yes — clip-path is animatable in modern browsers as long as both polygon() values being transitioned between have the exact same number of points in the same order. Define two point sets with matching lengths and transition or @keyframes between them for a morphing effect.
Does clip-path work in all browsers?: polygon() has full support in all current major browsers with no vendor prefix needed. If you need to support very old browsers, provide a fallback background-color or border-radius shape before the clip-path rule, since unsupported browsers will simply ignore clip-path and show the full box.
Is my shape design sent anywhere?: No — every point and the resulting CSS are computed and rendered entirely in your browser. Nothing is uploaded to a server.