CSS Clip Path Maker

Create CSS clip-path shapes visually by dragging points with polygon, circle, and ellipse presets.

Tested tool guide Tested browser tools Checked August 15, 2026

What CSS Clip Path Maker does, with a checked example

This tool lets you build a CSS clip-path value by manipulating a shape directly on a preview box instead of typing coordinates by hand. Switch between polygon, circle, and ellipse modes, drag the resulting points or radius handles, and the tool writes out the matching clip-path function as you go. The part people trip on: every coordinate is a percentage of the box being edited, not a fixed size, so a shape that looks right in the square preview can skew badly once pasted onto a wide banner or a differently proportioned element.

Worked example

A concrete input and expected output from the current implementation.

Input

Set a triangle in polygon mode with vertices at top-center, bottom-right corner, and bottom-left corner of the preview box.

Expected output

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Each vertex is expressed as an x% y% pair relative to the element's own box - 50% 0% for top-center, 100% 100% for bottom-right, and 0% 100% for bottom-left - with the path closed automatically back to the first point.

How the result is produced

Point and handle editing on a preview canvas

Polygon mode gives draggable vertices over a preview box; moving a point updates its x/y position as a percentage of the box's width and height. Circle and ellipse modes swap the vertex grid for a radius and center handle, or an rx/ry pair, that can be dragged to adjust the shape.

Live text output tied to the shape

As the shape is edited, the tool re-renders the corresponding clip-path function - polygon(x% y%, ...), circle(r% at x% y%), or ellipse(rx% ry% at x% y%) - as CSS text ready to copy into a stylesheet.

Good uses

Cutting an angled or notched section divider between two page sections without manually computing polygon percentages.
Building a circular or elliptical image mask for an avatar or hero photo and getting exact circle()/ellipse() syntax to paste into a stylesheet.
Prototyping how a card, badge, or button looks and behaves when clipped to a non-rectangular shape before committing the CSS to a project.

Limits and checks

Coordinates are percentages of the element's own box (the border-box, which is the default reference box for clip-path unless the CSS specifies padding-box, content-box, or another box), so a shape tuned in a square preview will skew if pasted onto an element with a very different width-to-height ratio.
Only the polygon, circle, and ellipse basic-shape functions are covered; inset() and an SVG clipPath/path() reference are not part of this generator, so rounded rectangles with per-corner radii or freeform curves need a different tool.
Older WebKit-based browsers can require a -webkit-clip-path prefix for basic shapes; check the copied CSS and add the prefix yourself if you need to support them, since the generated output may be unprefixed.

Common questions

Will the shape I made animate smoothly if I transition between two clip-paths?

Only if both values use the same basic-shape function, the same number of points, and the same reference box - two polygons with matching vertex counts and a compatible fill rule (both nonzero or both evenodd) can interpolate smoothly, but a polygon transitioning to a circle, two polygons with mismatched point counts, or shapes that resolve against different reference boxes will not animate smoothly in most browsers. This tool outputs a static value per shape; the transition or animation rule, including any box or fill-rule keyword, is written separately.

Does clipping an image here actually crop the file?

No. clip-path only changes what is painted and, in current browsers, what is clickable on a live element - the underlying image file and the element's box for layout purposes, such as margins and document flow, are unchanged. This tool hands over CSS text to apply; nothing is saved or exported as a cropped image.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.