About the CSS Clip-Path Generator
The CSS clip-path property can crop any element into a triangle, polygon, circle, or entirely custom shape without touching the underlying image or content, but writing the exact coordinate points for a polygon shape from scratch is genuinely difficult without a visual editor. This generator lets you drag and adjust shape points directly over a live preview and exports the resulting clip-path CSS, ready to apply to any image or element.
How it works
Choose a starting shape — triangle, pentagon, hexagon, arrow, or a fully custom polygon — and each shape's defining points appear as draggable handles over the preview. As you move a point, its coordinates update as percentages relative to the element's own box, and the CSS clip-path polygon() function is rebuilt live to match, so the exported code reflects exactly the shape you see on screen rather than approximate hand-typed guesses.
Common use cases
- Cropping a hero image into a diagonal or angled shape instead of a plain rectangle
- Creating an arrow-shaped call-to-action button or badge
- Designing angled section dividers between two parts of a page without an SVG asset
- Building custom-shaped image galleries or portfolio thumbnails
- Getting exact polygon coordinates instead of guessing percentage points by hand
Tips for best results
Because clip-path coordinates are typically expressed as percentages of the element's own box, a shape you design at one size will scale proportionally if the element resizes responsively — but extreme aspect ratio changes (like a shape designed on a square element being applied to a very wide banner) can distort the intended proportions, so preview your shape at the actual size and aspect ratio it will be used at in production. Elements cropped with clip-path lose their normal clickable bounding box outside the visible clipped area, which matters for interactive elements like buttons — the invisible corners of a clipped shape are no longer clickable, only the visible shape itself is.
Frequently asked questions
Beyond the flexible polygon() function used for custom shapes, clip-path also supports circle(), ellipse(), and inset() for simpler geometric crops, though this generator focuses primarily on the polygon syntax since it covers the widest range of creative shapes with one consistent approach.
No — clip-path only changes what's visually rendered; the element's box model, size, and position in the document flow remain completely unchanged, which means surrounding elements won't reflow around the new visible shape.
Yes, clip-path is animatable with CSS transitions and animations, provided the polygon() values on both sides of the animation have the same number of points — animating between shapes with a different number of coordinate points doesn't interpolate smoothly.
clip-path with the polygon() function is supported in all current major browsers without prefixes. Older Safari versions historically needed a -webkit- prefix, which this tool's generated CSS includes for broader safety.
No — once an element is clipped, only the visually visible portion of the shape remains interactive; the parts of the original rectangular box that are now hidden by the clip no longer register clicks, hovers, or other pointer events.