CSS clip-path Generator

What CSS clip-path does

The clip-path property hides everything outside a shape you define, so a plain rectangular element can render as a triangle, a hexagon, a circle or a rounded crop without touching its markup or exporting an image. The layout box stays the full rectangle — only the painted pixels are masked — so surrounding content still flows around the original rectangle, and pointer events land only on the visible region. This tool builds the four basic-shape functions visually and hands you the exact value to paste.

The polygon coordinate system

A polygon() is a list of vertices, each an X Y pair. Here every value is a percentage of the element's own box, so the shape scales with the element instead of breaking at a fixed size. The origin 0% 0% is the top-left corner and the Y axis points down — 0% is the top edge, 100% the bottom — which is the reverse of a maths graph and the single most common source of confusion. The browser draws straight edges between the points in list order and closes the last one back to the first, so the order matters: shuffle the vertices and a clean shape can fold into a self-crossing one.

Worked example: a triangle

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

The first point sits at the top-centre, the second at the bottom-left, the third at the bottom-right; joined in order they trace an upward triangle. Drag the top dot in the preview and you will see only that one coordinate pair change in the output — the tool rounds each value to a whole percentage so the string stays clean and copy-ready.

circle, ellipse and inset

circle(r at cx cy) and ellipse(rx ry at cx cy) describe the shape you keep; inset(top right bottom left round radius) instead crops inward from each edge and can round the corners, which is the quickest route to a rounded-rectangle mask. One honest caveat about the radius unit: a circle's percentage radius resolves against the box's diagonal ÷ √2, not its width, so on a non-square element 50% will not reach the side edges — switch to a square element, or use ellipse with separate rx/ry, when you need exact edge contact.

Browser support and what to reach for next

All four basic shapes work unprefixed in every current Chrome, Edge, Firefox and Safari; the preview here also sets -webkit-clip-path for older WebKit, but the value you copy is the standard one to ship. Animating between two clip-paths only tweens smoothly when both use the same function with the same point count. To finish the effect, pair a clip with the CSS Transform Generator for motion, the Box-Shadow Generator (note: a box-shadow follows the clipped silhouette via filter: drop-shadow(), which the CSS Filter Generator builds), or the Gradient Generator for the surface you are clipping.