Question 1

What is the CSS clip-path property?

Accepted Answer

clip-path lets you clip an element to a custom shape — everything outside the shape becomes invisible while everything inside stays visible. It accepts basic shape functions like polygon(), circle(), ellipse(), and inset(), each defined with percentage or length coordinates relative to the element's own box.

Question 2

How do the polygon() percentages work?

Accepted Answer

Each pair of numbers in polygon(x1% y1%, x2% y2%, ...) is a point, with x measured from the left edge and y measured from the top edge of the element's box. The browser connects the points in order and fills the resulting shape. Because the points are percentages, the shape scales automatically if the element is resized — this is what makes clip-path shapes responsive.

Question 3

Why do some coordinates go below 0% or above 100%?

Accepted Answer

Percentages outside the 0-100 range are valid CSS — they move a point beyond the element's edge. This is useful for shapes that should visually "bleed" past the box boundary (for example, a trapezoid whose top edge should look flush with the container). This tool allows dragging points from -50% to 150% for exactly that reason.

Question 4

What is the difference between polygon, circle, ellipse, and inset?

Accepted Answer

polygon() draws a shape from any number of straight-line points, and is the most flexible. circle() and ellipse() draw round shapes from a radius (or two radii) and a center position. inset() clips a rectangle inward from each of the four edges and can optionally round its corners — useful for a responsive rounded-rectangle crop.

Question 5

Does this tool upload my image or design?

Accepted Answer

No. This tool doesn't work with an uploaded image at all — it generates a pure CSS value from coordinates you drag or type. Nothing is ever sent to a server; the shape math and live preview run entirely in your browser using JavaScript.

Question 6

How do I use the generated clip-path CSS?

Accepted Answer

Copy the CSS value (or the full declaration) and apply it to any element, e.g. .hero-image { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }. For browsers that need it, you can also add the -webkit-clip-path prefix with the same value for broader Safari support.

Question 7

Why is my clip-path shape not appearing?

Accepted Answer

clip-path only clips the element it's applied to — it doesn't resize or reposition it. Make sure the element has a visible width and height (or contains a background image/color), and check that the coordinates form a closed shape inside or near the element's box.

CSS Clip-Path Generator

Shape Editor

CSS Output & Preview

Frequently Asked Questions

What is the CSS clip-path property?

How do the polygon() percentages work?

Why do some coordinates go below 0% or above 100%?

What is the difference between polygon, circle, ellipse, and inset?

Does this tool upload my image or design?

How do I use the generated clip-path CSS?

Why is my clip-path shape not appearing?

Related Tools

CSS Cubic-Bezier Easing Curve Generator

UTM Campaign URL Builder

QR Code Generator