CSS Clip-Path Generator

About the CSS Clip-Path Generator

Cut an element into any shape with CSS clip-path, by dragging instead of typing coordinates. Build a polygon point by point — drag the points, click an edge to add one, move the whole shape with the handle in its middle — or use a circle, ellipse or inset rectangle with draggable radius and edge handles. Start from 25 presets (triangle, trapezoid, parallelogram, rhombus, regular polygons, star, bevel, rabbet, arrows, points, chevrons, cross, close, message bubble, frame and more) and preview the shape on a sample picture or one of your own, which stays on your device.

The code comes as CSS in % (scales with the element) or px (for the element size you set), as the newer shape() function, as a Tailwind arbitrary property and as a text wrap: the same shape on a float with shape-outside, so text flows along its edge, shown live below the editor. Polygons can get rounded corners, which polygon() cannot do — the tool writes them with shape() and keeps a sharp polygon as the fallback for older browsers. You can also paste an existing clip-path to edit it.

Common uses

• Angled section dividers, slanted hero images, ribbons, tags, arrows and badge shapes.
• Avatars and thumbnails in circles, hexagons or stars without editing the images.
• Magazine-style layouts where text wraps around a cut-out photo.
• Hover effects: animate between two polygons with the same number of points.

How the basic shapes work

clip-path hides everything outside the shape; hidden parts do not receive clicks either (CSS Masking). Coordinates in % are measured against the element’s border box: polygon() takes x y pairs from the top left; ellipse(rx ry at x y) takes radii in % of the width and the height; circle(r at x y) takes one radius, whose % is of √(width² + height²) ÷ √2 so a circle stays round on non-square boxes; inset(top right bottom left round radius) cuts in from the edges like margin values and can round its corners (CSS Shapes). Percentages keep the shape when the element is resized; px values fix it to one size.

shape() and rounded corners

shape() describes an outline with drawing commands — from x y, line to, hline and vline, curve to … with …, arc to … of … and close — and is supported from Chrome and Edge 135, Firefox 148 and Safari 18.4 (MDN). Unlike polygon(), it can draw curves, so the tool uses it for Rounded corners: each corner is replaced by a curve that starts and ends where a circle of the chosen radius would touch the two edges (never past the middle of an edge), measured at the element size you set. The CSS lists the sharp polygon() first and the shape() second, so browsers that do not understand shape() keep the polygon.

Wrapping text with shape-outside

shape-outside makes the text next to a float follow a shape instead of the float’s rectangle; it accepts the same polygon(), circle(), ellipse() and inset() functions. Give the float a width and height (an image with known dimensions works), add shape-margin to keep the text away from the edge, and put the floated element before the text. By default shape-outside measures from the margin box, so the code writes border-box after the shape to match the clip-path. Rounded polygons wrap along their sharp outline.

Limitations

• Polygons use the default nonzero fill rule; a pasted polygon with evenodd is read without it.
• Pasted shape() values are read when they use straight lines (line to, hline, vline, close); curves, arcs and path() are not edited here.
• Rounded corners are calculated for the element size you set; at other sizes they scale with the shape.
• clip-path does not change the element’s layout box: the hidden parts still take up space.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.