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.

Generador CSS Clip Path

Crea formas CSS clip-path visualmente con controles arrastrables. Genera código para polígonos, círculos y elipses.

Formas predefinidas

Vista previa en vivo

Color

CSS generado

valor clip-path (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%);
}

Coordenadas de puntos (arrastra para ajustar):

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%

Cómo usar

Crea formas CSS clip-path visualmente con controles arrastrables. Genera código para polígonos, círculos y elipses.

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.

Características

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

Preguntas frecuentes

Más información

CSS Clip Path Generator Guide — Create Custom Shapes