CSS Clip Path Generator

What the CSS Clip Path Generator does

The CSS Clip Path Generator helps you crop an element into a custom shape using the clip-path property. Instead of memorising the syntax for polygons, circles, ellipses and inset rectangles, you build the shape visually and the tool writes the exact CSS for you.

For polygons it offers a draggable editor: each point is a handle you can move directly on the preview, and the coordinates update live as percentages of the element's box. This makes it easy to create triangles, diamonds, arrows, stars and other multi-point shapes that would be slow to hand-tune.

It is built for front-end developers and designers who want non-rectangular sections, image masks, decorative cutouts or animated reveal effects, and for learners exploring how each clip-path function is written.

How to use it

Choose a shape type from the tabs: polygon, circle, ellipse or inset. For polygons, start from a preset like Triangle, Hexagon, Arrow or Star, then drag any point on the preview to reshape it; the handles snap to whole-percent positions for clean values.

For circle and ellipse, adjust the radius (or two radii) and the centre position. For inset, set the distance clipped from each edge and an optional corner radius to round the visible rectangle.

When the shape looks right, copy the generated clip-path declaration and paste it onto your target element. Apply it to an image, a div with a background, or any block element to crop it to the shape you designed.

Tips and browser notes

Because all coordinates are percentages, the shape scales with the element, so the same rule works on different sizes. Remember that clip-path only changes what is visible — the element still occupies its original rectangular space in the layout, which matters for surrounding content and click areas.

The clip-path property is widely supported in modern browsers. For interactive reveals you can transition or animate between two clip-path values to create wipe and morph effects.