Build a clip-path visually instead of hand-editing coordinate lists: pick one of
25 presets, drag the points until the shape looks right, and copy the CSS. Polygons support
adding, removing, and keyboard-nudging points; circles, ellipses, and inset rectangles get
dedicated sliders. Preview against the built-in gradient or drop in your own image — including
iPhone HEIC photos — to see exactly how your content will be cropped.
Everything runs in your browser; nothing is uploaded. If you're after rounded-rectangle shapes specifically, the squircle generator and border-radius generator cover the smooth-corner cases better, and the gradient generator pairs well for building the backgrounds you clip.
Frequently asked questions
What is CSS clip-path?
clip-path is a CSS property that crops an element to a shape — a polygon, circle, ellipse, or inset rectangle — hiding everything outside it. Unlike images edited in Photoshop, the clipping happens live in the browser, so the same element can animate between shapes or adapt responsively. This clip path maker outputs standard CSS you paste straight onto any element.
Is this a Clippy alternative?
Yes — it covers the same workflow as the well-known Clippy tool: pick from 25 shape presets (triangle, star, arrows, chevrons, polygons up to a decagon), drag the points until the shape is right, then copy the generated clip-path CSS. On top of that you get keyboard nudging for pixel-precise edits, scale controls, adjustable decimal precision, and the option to preview against your own image.
How do I make a custom polygon shape?
Start from the preset closest to what you want, then drag the round handles on the preview. Click "Add point" to insert a new point at the midpoint of the selected segment, select a point and press "Remove selected point" to delete it (a polygon always keeps at least three points), and use the arrow keys to nudge a selected point in 1% steps.
Which browsers support clip-path?
All modern browsers — Chrome, Edge, Firefox, and Safari — support the basic shapes this tool generates (polygon, circle, ellipse, inset), including on mobile. The one caveat is old pre-Chromium Edge and IE11, which never supported it; content simply renders unclipped there, so make sure your layout still works without the clip.
Why use percentages instead of pixels in clip-path?
Percentage coordinates scale with the element, so the same clip-path works on a 100px thumbnail and a full-width hero without media queries. This generator emits percentages for exactly that reason, and lets you choose 0, 1, or 2 decimal places — more precision means smoother edges on large elements at the cost of slightly longer CSS.