Does clip-path delete the hidden part of an image?

No. It controls what the browser paints for the element. The original image or content remains intact and can reappear if the CSS clipping rule is removed.

Can polygon coordinates be edited precisely?

Yes. Every vertex has X and Y percentage fields in addition to its draggable handle. Points can also be inserted on the longest edge or removed while the polygon remains valid.

What does the round value do in Inset mode?

It adds rounded corners to the inset rectangle using native inset() round syntax. It does not affect polygon, circle or ellipse modes.

Are the uploaded image and outside-area guide included in CSS?

No. Both are preview aids. The local image is not uploaded, and Copy CSS returns only the clip-path property for the selected geometry.

Back to Design & Color Tools

CSS Clip-Path Generator

Define the visible boundary of an element with draggable geometry instead of calculating every CSS percentage by hand.

Shape controls

Presets

Point 1x%y%

Point 2x%y%

Point 3x%y%

Live Preview

Upload image

Generated CSS

clip-path: polygon(50% 12.5%, 93.301% 87.5%, 6.699% 87.5%);

How to use CSS Clip-Path Generator

1
Choose Polygon, Circle, Ellipse or Inset mode.
2
In Polygon mode, pick a preset, change an Arrow direction, drag vertices or edit their X/Y values; add or remove points when needed.
3
For other modes, set the radius, center, inset sides and optional rounded inset corners with the available controls.
4
Upload an image for a content-specific preview and toggle Show outside area to reveal the original rectangle.
5
Inspect the resulting shape, click Copy CSS and apply the generated clip-path declaration to your element.

Frequently asked questions

About CSS Clip-Path Generator

CSS clip-path can create distinctive cards, image crops and interface silhouettes, but polygon percentages are difficult to reason about as raw code. This editor puts those coordinates directly on the preview and keeps their numeric fields available for exact adjustment.

Polygon presets provide editable starting points for familiar shapes and directional arrows. Circle and ellipse modes expose centers and radii, while Inset produces compact side values with optional rounded corners. Each mode generates its corresponding native CSS function rather than approximating everything as a polygon.

A local image can replace the sample background while designing, and an outside-area overlay reveals what the clipping rule hides. Neither aid enters the copied declaration; the output remains a focused clip-path property.