CSS clip-path generator
Start from a preset shape or drag the polygon points directly to create your own cutout, and get the matching clip-path CSS code with a live preview. Everything happens in your browser, nothing is sent to a server.
Drag the white points on the preview to adjust the shape, or add/remove points below.
How it works
The CSS property clip-path cuts an element into a shape defined by a list of points, expressed as percentages of the element's width and height. This tool offers ready-to-use common shapes (triangle, hexagon, ribbon, star...) and also lets you move each point with your mouse or finger to draw a fully custom cutout.
Why are coordinates expressed as percentages?
Using percentages rather than pixels makes the clipped shape responsive: it automatically adapts to the actual size of the element it's applied to, unlike fixed values that would distort the cutout on a different screen.
Does clip-path work on all images and videos?
Yes, clip-path applies to most HTML elements, including images, videos, buttons, and containers, in all modern browsers; however, keep some safety margin in your layout, as content outside the clipped shape becomes invisible but still occupies its original space.
100% local processing: the polygon drawing and generated code remain entirely in your browser.