What is CSS clip-path?

clip-path is a CSS property that clips an element to a shape. The polygon() function lets you define a custom shape using a list of x/y percentage coordinates. Anything outside the shape is hidden.

Does clip-path work in all browsers?

Yes. clip-path with polygon() is supported in all modern browsers (Chrome, Firefox, Safari, Edge). No prefix is needed in current browser versions.

Can I use clip-path on images?

Yes. clip-path works on any element, including images, divs, and videos. It is commonly used for hero sections, image masks, and creative card layouts.

CSS Clip Path Generator — Visual Polygon Shape Editor

CSS Clip Path Generator

Drag points to create custom clip-path polygon shapes. Choose a preset or build your own.

100% client-side · no upload

Drag the white handles to adjust points

Generated CSS

How to use the clip path generator

Choose a preset shape to start, or start from the default rectangle.
Drag the white handles on the preview area to adjust each polygon point.
Click Add Point to insert a new vertex midway through the shape.
Copy the CSS and paste it into your stylesheet.

Related tools: CSS Shadow Generator · SVG Optimizer · All Design Tools

よくある質問

What is CSS clip-path?: clip-path is a CSS property that clips an element to a shape. The polygon() function lets you define a custom shape using a list of x/y percentage coordinates. Anything outside the shape is hidden.
Does clip-path work in all browsers?: Yes. clip-path with polygon() is supported in all modern browsers (Chrome, Firefox, Safari, Edge). No prefix is needed in current browser versions.
Can I use clip-path on images?: Yes. clip-path works on any element, including images, divs, and videos. It is commonly used for hero sections, image masks, and creative card layouts.