What is CSS clip-path?

CSS clip-path is a property that clips an element to a specific shape, hiding everything outside the clipping region. Common values include polygon() for custom multi-point shapes, circle() for round clips, ellipse() for oval shapes, and inset() for rectangular clips with optional rounded corners. It's widely used for hero images, avatar shapes, and decorative section dividers.

How do I create a custom polygon clip-path?

Select any polygon preset (triangle, pentagon, star, etc.) and then drag the white circular handles in the live preview to reposition each vertex. The clip-path value updates in real time as you drag. You can also add more points using the Add Point button, or manually edit the clip-path value in the text field below the preview.

Does clip-path work in all browsers?

The clip-path property with polygon(), circle(), ellipse(), and inset() functions is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The generator outputs both clip-path and -webkit-clip-path for maximum compatibility. Internet Explorer does not support clip-path, but IE usage is now negligible.

Can I use clip-path on images?

Yes, clip-path works on any HTML element including images, divs, buttons, and videos. Apply the generated CSS to an img or div element. For images, combining clip-path with object-fit: cover ensures the image fills the clipped area nicely.

What is the difference between clip-path and border-radius?

border-radius only rounds the corners of an element's rectangular box, creating pill shapes and circles. clip-path is much more powerful — it can create any polygon shape (triangles, stars, arrows, hexagons), not just rounded rectangles. clip-path also clips the element's background, borders, and box-shadow.

CSS Clip Pathジェネレーター

ドラッグ可能なハンドルでCSS clip-path形状を視覚的に作成します。ポリゴン、円、楕円のコードを生成します。

形状プリセット

ライブプレビュー

色

生成されたCSS

clip-path値（編集可能）

.clipped {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

点の座標 (ドラッグして調整):

P1: 50.0%, 0.0%

P2: 100.0%, 38.0%

P3: 82.0%, 100.0%

P4: 18.0%, 100.0%

P5: 0.0%, 38.0%

使い方

ドラッグ可能なハンドルでCSS clip-path形状を視覚的に作成します。ポリゴン、円、楕円のコードを生成します。

1Choose a shape preset (triangle, star, hexagon, circle, etc.) to start with a ready-made clip-path.
2Drag the white handles in the live preview to reshape polygon vertices. The clip-path value updates instantly.
3Use 'Add Point' or 'Remove Point' to change the number of vertices in a polygon shape.
4Change the preview color using the color picker to test how the clip-path looks with your design.
5Copy the generated CSS with one click and paste it into your stylesheet.

主な機能

12 shape presets — triangle, star, pentagon, hexagon, arrow, circle, ellipse, and more
Draggable polygon handles — interactively reposition each vertex in the live preview
Editable clip-path field — manually type any valid clip-path value and see the preview update
Outputs both clip-path and -webkit-clip-path for full browser compatibility

よくある質問

詳しく読む

CSS Clip Path Generator Guide — Create Custom Shapes