CSS clip-path Generator
Create clip-path with polygon, circle, star, and other presets, with preview and CSS copy
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Click common shape presets, including triangle, diamond, hexagon, star, arrow, circle, and ellipse, to instantly generate a CSS clip-path value. Preview the clipping effect in real time on a colored box or your own uploaded image, then edit the value directly or copy it as-is.
How to use
- Click a shape preset button to choose a clip-path shape.
- If needed, edit the clip-path value directly to fine-tune the coordinates.
- Add a preview image to see how it looks applied to a real photo.
- Copy the finished clip-path CSS and paste it onto the element you want.
FAQ
- How does clip-path work?
- It keeps only the inside of a specified shape (polygon, circle, and so on) visible and clips away the outside. It doesn't actually cut the element; it just masks the visible area, so changing the value brings the original content right back.
- Can I edit the polygon coordinates directly?
- Yes. In the value field you can edit each vertex's coordinates directly in 'polygon(x% y%, ...)' format. x is measured from the left and y from the top, as percentages. If the syntax is wrong, the original shows with no clipping, so feel free to experiment.
- Does it work in every browser?
- Basic shapes like polygon, circle, and ellipse are widely supported in modern browsers, but rendering can vary by device, so verify before applying. Uploaded images are processed entirely in your browser, with nothing sent to a server.