CSS clip-path generator

The clip-path property hides everything outside a shape. Pick a shape and copy the line.

How a shape is described

Most shapes here are a polygon(): a list of corner points, each written as two percentages, across and down, measured from the top-left corner of the box. 50% 0% is the middle of the top edge, and 100% 100% is the bottom-right corner. The browser joins the points in order and hides everything outside. A circle() takes a radius and a centre; ellipse() takes two radii; inset() cuts a rectangle in from each side and can round its corners.

What clip-path does not do

• It does not draw. The shape is only a cut. A border or box-shadow of the same element is cut too, so a clipped box shows no outside shadow. To get a shadow, put the clipped element inside a wrapper and use filter: drop-shadow() on the wrapper.
• It changes where clicks work. The part outside the shape is not part of the element, so a click or a hover there does not reach it. We checked this in the browsers named below.
• It scales with the box. Percentages follow the element size, so the shape stretches if the box is not square.

Common mistakes

1. Forgetting that the points must be in order around the shape. Swapping two points makes a twisted bow-tie shape.
2. Using pixels in a responsive layout. Percentages keep the shape when the box changes size.
3. Putting clip-path on a container and then wondering why the child's shadow vanished: children are clipped as well.

This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.