CSS Clip Path Generator

What this tool is used for

• Producing a polygon clip path without writing the coordinates by hand.
• Cutting a decorative angle off a section without an image.
• Getting a circle or an inset shape with a live preview.
• Producing a clip path to compare against an SVG alternative.
• Building a shape a designer specified visually.

Frequently Asked Questions

How do the polygon coordinates work?

Each pair is x then y as a percentage of the element's own box, starting from the top-left. `polygon(50% 0%, 0% 100%, 100% 100%)` is a triangle: top-centre, bottom-left, bottom-right. Points are joined in the order given, so reordering them produces a different — often self-crossing — shape.

Does clipping change the layout?

No, and this catches people out. The element still occupies its full rectangle for layout and still receives pointer events only within the *visible* region. So a clipped element can look small while pushing its neighbours as though it were not.

Can a clip path be animated?

Yes, between two polygons with the *same number of points* — the browser interpolates each point pairwise. Different point counts do not animate, which is why designers pad the simpler shape with duplicate coordinates to match.

What other shapes are available?

`circle()`, `ellipse()`, `inset()` with optional rounded corners, and `path()` taking an SVG path string. `path()` is the most powerful and the least convenient, since it takes absolute user units rather than percentages.

Is anything lost for accessibility or SEO?

Clipped-away content is still in the DOM and still read by a screen reader — it is a visual crop, not a removal. That is usually right, but it means text you hid visually is still announced, so remove it properly if it should not be there.

Do percentages and pixels behave the same in a polygon?

No. Percentages resolve against the element's own width and height, so the shape stretches with the box; pixel coordinates stay fixed and the shape drifts relative to the content as the element resizes.

Common errors and gotchas

• Clipping content that then becomes unreachable, since clipped areas do not receive pointer events.
• Using percentage coordinates and finding the shape distorts at other aspect ratios.
• Clipping text, which can cut descenders and hurt legibility.
• Assuming a clip path replaces overflow handling, which it does not for scrolling.
• Forgetting that a clipped element still occupies its full layout box.