CSS Clip-Path Generator
Visually design CSS clip-path shapes: polygons, circles, ellipses, and insets. Drag points on the canvas, pick from shape presets (triangle, star, arrow, hexagon, message), and copy clean clip-path CSS instantly.
Tip: click empty canvas to add a point · drag points to move · double-click a point to delete · right-click a point to delete.
About this tool
The CSS clip-path property hides parts of an element outside a defined shape, letting you turn a plain rectangle into a triangle, circle, star, speech bubble, or any polygon you can draw. Unlike overflow: hidden with a wrapper, clip-path needs no extra markup and clips the element itself — including its background, borders, and child content.
Example: clip-path: polygon(50% 0%, 100% 100%, 0% 100%) crops a box into a triangle pointing up. clip-path: circle(50% at 50% 50%) turns a square into a perfect circle. Coordinates are percentages of the element's own box, so the shape scales with the element.
This generator lets you drag points on a live canvas, switch between polygon, circle, ellipse, and inset modes, load ready-made presets, and copy the generated CSS in one click. The output uses only standard syntax that works in every modern browser.
FAQ
clip-path or mask — what's the difference? ›
clip-path uses vector shapes (polygon points, a circle radius) and produces hard edges. mask uses an image or gradient where pixel transparency determines visibility, so it can produce soft, feathered edges. Use clip-path for geometric shapes and mask for image-based or blurred cutoffs.
Do the coordinates use the element's box or the viewport? ›
They use the element's own border box, so 50% 50% is always the center of the element regardless of where it sits on the page. This makes clip-path shapes responsive — they scale with the element.
Why does my clipped element still take up the original space? ›
clip-path is purely visual — it hides pixels but does not change layout. The element still occupies its full rectangle in the document flow, so neighbouring elements are positioned as if nothing was clipped. Use it for visual effects, not for layout changes.
Is clip-path supported in all browsers? ›
Yes, all modern browsers (Chrome, Firefox, Safari, Edge) support polygon, circle, ellipse, and inset clip-paths without prefixes. The SVG path() syntax is newer and has slightly less support; if you need maximum reach stick to the four basic shapes.
How is this different from the CSS Triangle Generator? ›
The CSS Triangle Generator creates triangles using the border technique — zero-width element with three transparent borders and one solid. It is lighter for simple tooltip carets and dropdown arrows but only produces triangles. This tool uses clip-path and can create triangles, circles, stars, arrows, hexagons, and custom polygon shapes with a visual canvas.