CSS clip-path generator

Pick a shape clip-path and get the CSS.

Click a shape to update the preview and the clip-path code. Apply it directly to an image or box.

You want a photo shown as a hexagon, or a section with an angled edge instead of a flat one. The old approach was a PNG mask or an extra wrapper with rotated pseudo-elements, and both are awkward to maintain.

clip-path does it with one line of CSS, but writing polygon coordinates from scratch is tedious. This page keeps a set of ready shapes: click one, see it applied to the preview, and copy the value.

How it works

Picking a shape

The preset buttons cover triangle, rhombus, pentagon, hexagon, star, speech bubble, circle, ellipse, parallelogram and arrow. Selecting one applies it to the preview box immediately and writes the full declaration — clip-path: polygon(50% 0%, 0% 100%, 100% 100%); — into the code field. Copy puts it on your clipboard, ready to paste into any rule.

What the values mean

Three shape functions appear in the output.

Function	Form	Reads as
`polygon()`	`polygon(x y, x y, …)`	A list of corner points, joined in order
`circle()`	`circle(r at cx cy)`	A radius and a centre point
`ellipse()`	`ellipse(rx ry at cx cy)`	Separate horizontal and vertical radii, plus a centre

Coordinates are percentages of the element's own box, measured from the top-left corner. Because they are relative, a clipped element keeps its shape at any size — which is why these values survive responsive layouts without adjustment.

Editing the coordinates

The presets are a starting point rather than the whole set. Move a point in polygon() and the corner moves; add a comma-separated pair and you gain a corner. To cut a diagonal off the bottom of a full-width section, for instance, polygon(0 0, 100% 0, 100% 85%, 0 100%) is enough.

Things worth knowing before you ship

An element with no dimensions has nothing to clip, so display: inline elements and boxes with no height show no visible effect — set display: block and a size first. The removed area also stops receiving mouse events, which matters if you clip a button: the clickable region shrinks to the visible shape. And box-shadow is drawn from the original rectangle and then clipped away with it, so a shadow that follows the outline needs filter: drop-shadow() on a parent element instead.

Terms explained

clip-path: A CSS property that hides everything outside a given shape. The element still occupies its full box in the layout; only the painting is cut.
polygon(): A shape defined by listing corner points as `x y` pairs. The browser connects them in the order given and closes the path.
circle(): A circular clip written as a radius followed by `at` and a centre point, for example `circle(50% at 50% 50%)`.
ellipse(): Like `circle()` but with separate horizontal and vertical radii, giving an oval.
Percentage coordinates: Positions measured against the element's own width and height rather than in pixels, so the shape scales with the element.
filter: drop-shadow(): A filter that casts a shadow from the visible outline of an element, including a clipped shape — unlike `box-shadow`, which uses the rectangle.

Frequently asked questions

I added clip-path and nothing changed. What should I check first?

Almost always the element has no box to clip. An `inline` element, or a `div` with no height and no content, gives the browser nothing to cut. Set `display: block` or `inline-block` and confirm the element has width and height, then reapply.

Does clipping affect layout or just appearance?

Only appearance. The element still reserves its full rectangle, so neighbouring content flows around the original box, not the visible shape. If you want surrounding text to follow the outline, that is a separate property — `shape-outside`.

Can I animate or transition a clip-path?

Yes, provided both states use the same function with the same number of points. A polygon can transition smoothly to another polygon with an equal point count, and a circle can grow or shrink, but a polygon cannot interpolate into a circle.

How do I build a shape that is not in the list?

Copy the closest preset and edit the numbers. Each `x y` pair is one corner, and inserting another pair adds a corner. Because the values are percentages, an edited shape still holds up when the element is resized.

Is clip-path a good way to crop photos?

For display, yes — it avoids producing cropped image files and keeps a single source image for every shape. It does not reduce the file that is downloaded, though, so if the goal is a smaller image rather than a different silhouette, resize the file itself.