CSS Clip Path Generator

Sobre esta ferramenta

Create any CSS clip-path shape without hand-coding coordinates. The interactive canvas shows a live preview of a colored element with your clip-path applied, updating in real time as you drag handles or type values. Four shape modes cover every clip-path syntax: Polygon mode places draggable circular handles at each vertex — drag them to reshape the clip area freely. Click the canvas to add a new vertex, and click an existing handle then press Delete to remove it. Circle mode adjusts the radius and center position with two handles. Ellipse mode provides separate rx/ry radius handles plus a center handle. Inset mode shows four edge handles for top, right, bottom, and left insets with a border-radius option. Jump-start your design with 8 built-in polygon presets: triangle, inverted triangle, pentagon, hexagon, 6-pointed star, right arrow, left arrow, and parallelogram. Each preset loads as editable polygon points you can then customize. The generated CSS line (`clip-path: polygon(...)` or equivalent) is shown beneath the canvas and can be copied to the clipboard with one click. A toggle lets you preview the clip-path on a sample image instead of a solid color.

Como usar

1. 1 Select a shape type: Polygon, Circle, Ellipse, or Inset.
2. 2 For Polygon: drag the handles to position vertices, or click a preset to load a starter shape.
3. 3 For Circle or Ellipse: drag the center handle to move the shape and the radius handles to resize.
4. 4 For Inset: drag the four edge handles to set the inset values, and optionally set corner radius.
5. 5 The generated CSS updates live below the canvas — click Copy CSS to copy it to the clipboard.
6. 6 Toggle the image preview to see how the clip-path looks on a photo instead of a solid color.

Perguntas frequentes