CSS Clip-Path Generator

Draw polygon, circle, ellipse, and inset clip-path shapes visually and export the CSS code.

Tested tool guide Tested browser tools Checked August 16, 2026

What CSS Clip-Path Generator does, with a checked example

Shape an element's visible region by positioning the geometry for one of four CSS basic-shape forms: polygon(), circle(), ellipse(), or inset(). The generator translates the visual result into a clip-path declaration for a stylesheet. Polygon points determine straight edges, while the other modes describe radii, a center, or inward offsets. The frequent surprise is that clipping changes what is painted, not the element's layout box, so neighboring content still lays out around the original rectangle.

Worked example

A concrete input and expected output from the current implementation.

Input

Polygon points, in order: 0% 0%, 100% 0%, 50% 100%

Expected output

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

The first two points are the top-left and top-right corners, and the third is the bottom center. The final edge closes back to the first point, producing a triangle.

How the result is produced

Shape geometry

Choose a basic shape and adjust its geometry in the preview. A polygon is an ordered list of x-y coordinate pairs; consecutive points form edges, and the browser closes the last point back to the first. A circle records a radius and center, an ellipse records two radii and a center, and an inset records offsets from the box edges.

CSS coordinates

The generated declaration belongs on the element being clipped. Percentage x coordinates scale with the reference box width, while percentage y coordinates scale with its height. This makes the points responsive, but changing the element's aspect ratio can stretch the apparent shape. The declaration does not supply the element's dimensions, content, background, or positioning.

Good uses

Cut a rectangular hero image into an angled polygon while obtaining reproducible CSS coordinates.
Create circular or elliptical crops for portraits, product images, badges, or decorative panels.
Prototype inset clipping and compare its visible boundary with polygon-based alternatives before editing production CSS.

Limits and checks

A percentage-based shape scales with its element, but its angles and proportions may change when the element's aspect ratio changes.
Clipping hides painted regions without shrinking the layout box or making surrounding content flow around the visible silhouette.
Polygon vertices are connected in their listed order. Reordering points can create crossed edges and an unexpectedly filled or empty result.

Common questions

Will the same clip-path work on responsive elements?

Usually, when it uses percentages. Horizontal coordinates scale with the reference box width and vertical coordinates with its height. That keeps vertices at relative positions, but it does not preserve the same angles on elements with different aspect ratios. Test the declaration at every size and proportion the component actually uses.

Can the exported clip-path make text wrap around the shape?

No. clip-path limits visible painting; it does not define the contour used for line wrapping. Wrapping text around a floated shape is controlled by shape-outside and its layout requirements. Corresponding geometry can be recreated there, but the clip-path declaration by itself will not change how nearby text flows.

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.