Local CSS clip-path generator

Shape a CSS clip-path polygon with live preview

Choose a useful starting shape, tune each point with exact coordinates, and copy a responsive polygon declaration.

* Everything runs in your browser. No uploads or drawing data leave this page.

Starting shape

Point 1X (%)Y (%)

Point 2X (%)Y (%)

Point 3X (%)Y (%)

Point 4X (%)Y (%)

CSS ready

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

ClipBox

QUICK GUIDE

Polygon points define the edge

Each point uses a percentage from the left and top edge of the element.

Keep points in perimeter order for a clean shape instead of crossing edges.

The same percentages scale with the element, so the clip stays responsive.

Use presets as a starting point, then tune the coordinates for your component.

FAQ

What does clip-path do?

It creates a clipping region that controls which part of an element remains visible.

Why use percentages?

Percentage coordinates adapt to the element's own width and height, which keeps the shape responsive.

Can I use these points on an image?

Yes. Apply the copied declaration to an image, card, button, or other element.