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 Generator

Visually create CSS clip-path shapes with draggable handles. Generate clip-path code for polygons, circles, and ellipses.

Shape Presets

Live Preview

Color

Generated CSS

clip-path value (editable)

.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%);
}

Point Coordinates (drag to adjust):

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%

How to Use

Visually create CSS clip-path shapes with draggable handles. Generate clip-path code for polygons, circles, and ellipses.

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.

Key Features

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

Frequently Asked Questions

Learn More

CSS Clip Path Generator Guide — Create Custom Shapes