CSS Clip-Path Generator
Draw polygon, circle, ellipse and inset clip-path shapes with draggable points and copy the CSS.
Drag the dots to reshape. With a dot focused, use the arrow keys (hold Shift for bigger steps).
CSS output
How it works
Pick a shape function, drag the dots on the preview and the CSS clip-path
rule is rewritten live underneath. polygon() takes a list of X Y point pairs
in percentages of the element box, so polygon(50% 0%, 0% 100%, 100% 100%)
is a triangle; circle(), ellipse() and inset()
take radii and edge offsets instead. Every point is stored as a percentage, so the shape
scales with the element and stays responsive at any width. Copy the rule or download it
as a .css file, and tick the -webkit- option if you still
support older Safari. Nothing is uploaded — the generator is plain JavaScript running in
your browser, and the preview is the browser's own clip-path implementation, so what you
see is exactly what ships.
Frequently asked questions
How do I create a clip-path in CSS?
Add a clip-path property to the element and give it a shape function: clip-path: polygon(50% 0%, 0% 100%, 100% 100%) cuts a triangle. Each pair is an X Y coordinate measured from the top-left of the element's box, and using percentages keeps the shape responsive. In this generator you drag the dots on the preview (or nudge them with the arrow keys) and copy the finished rule — no hand-editing of coordinates needed.
What does clip-path: polygon() do?
polygon() lists the corner points of a custom shape and hides everything outside it. The element still takes up its normal space in the layout and its content is still there — only the painted pixels outside the polygon are clipped away, so text can overflow the visible shape. Use circle(), ellipse() or inset() instead when you want a round or rectangular cut, since those are shorter and easier to animate.
Is CSS clip-path supported in all browsers?
Yes for every current browser: Chrome, Edge, Firefox, Safari and all modern mobile browsers support the basic shapes (polygon, circle, ellipse, inset). Safari needed the -webkit-clip-path prefix until version 13, so tick the prefix option here if you still support older iOS or macOS versions. Because clip-path is purely visual, browsers that ignore it simply show the unclipped element, which makes it a safe progressive enhancement.