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