How do I use the generated CSS?

Copy the output and paste it into the rule for the element you want to clip, for example an image or a div. The element keeps its layout box; only the visible area is cut.

Why is there a -webkit-clip-path line?

It repeats the same value for older WebKit-based browsers that needed the prefix. Current browsers read the plain clip-path line, so you can drop the prefixed line if you do not support old Safari.

How do I add or remove polygon points?

Press Add Vertex to insert a point halfway between the last and first points, then drag it. Use the bin icon on a point's row to remove it. A polygon cannot go below three points.

Can I draw a freeform curve?

No. The tool covers polygon, circle, ellipse and inset. Curves beyond those need the path() function or an SVG clipPath, which this tool does not generate.

Which shape presets are included?

Triangle, rhombus, pentagon, hexagon, star, message, arrow and chevron. Choosing one loads its points into the polygon editor so you can keep adjusting them.

Design

CSS clip-path Generator

Create clip-path shapes visually with draggable points Runs on your device — nothing is uploaded, nothing is stored.

Preview

Vertices

X50%

Y0%

X100%

Y100%

X0%

Y100%

Generated CSS

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Preset Shapes

Click any shape to load it as an editable polygon.

Cubic-Bezier Easing EditorDesign Glassmorphism GeneratorDesign SVG Blob GeneratorDesign

About CSS clip-path Generator

This tool builds CSS clip-path values visually. Pick a shape (polygon, circle, ellipse or inset) and the preview square updates as you change it. For a polygon you drag the numbered points straight on the preview or fine-tune each point's X and Y with sliders, add points, or remove them down to a minimum of three. Eight polygon presets are one click away: triangle, rhombus, pentagon, hexagon, star, message bubble, arrow and chevron.

Circle and ellipse take a radius and a center position, and inset takes top, right, bottom and left offsets plus an optional corner radius. Every value is a percentage of the element's box, so the shape scales with the element. The output panel shows the finished declaration, with a -webkit-clip-path line for older Safari, and a copy button.

How to use CSS clip-path Generator

Choose polygon, circle, ellipse or inset.
Drag points on the preview or use the sliders and presets to shape it.
Check the live preview, then copy the CSS from the output panel.
Paste it into the rule for your element.

Limitations and trade-offs

The preview is a fixed gradient square, not your own image or element. Copy the CSS and check it on the real element, especially if it is not square.
Values are percentages only. The tool does not produce pixel values, the path() function or SVG references.
Polygon points snap to whole percentages when dragged, and a polygon needs at least three points.
Inset offsets and corner radius stop at 50%. Circle and ellipse sizes go up to 100%.

Frequently asked questions

Related tools