What is CSS clip-path?

The clip-path CSS property defines a clipping region that sets what part of an element should be shown. Pixels outside the clipping region are hidden. It accepts geometric shapes like polygon(), circle(), ellipse(), and inset(), as well as SVG path references.

How do I add or remove polygon vertices?

In Polygon mode, click anywhere on the canvas (outside existing handles) to add a new vertex at that position. Click an existing handle to select it (it turns red), then press the Delete or Backspace key to remove it.

What do the percentage values mean?

Clip-path coordinates are expressed as percentages relative to the element's bounding box. The top-left corner is 0% 0%, the bottom-right is 100% 100%, and the center is 50% 50%. This makes the shape scale correctly when the element resizes.

Can I animate clip-path in CSS?

Yes — clip-path is animatable with CSS transitions and animations, but only between shapes of the same type and with the same number of points. For example, you can transition between two polygons with identical vertex counts.

Design 無料サインアップ不要

CSS Clip Path Generator

Visually generate CSS clip-path shapes — polygon, circle, ellipse, inset — with draggable handles, preset shapes, and live preview.

ツールを読み込み中…

このツールについて

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.

使い方

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

このツールについて

使い方

よくある質問