CSS Clip Path Generator
Visual clip-path builder - polygon / circle / ellipse / inset / path, 20+ presets, custom polygon editor. Free, client-side.
Build CSS clip-path values with 5 function types (polygon / circle / ellipse / inset / path) and 20+ presets organized by category. Edit polygon points directly for custom shapes.
CSS
HTML
How to Use CSS Clip Path Generator
- Pick a function type: polygon (arbitrary points), circle (radius + center), ellipse (rx/ry + center), inset (rectangle clipped from each side), or path (SVG path).
- Pick a preset from the dropdown or edit values directly. For polygon: each line is one point as "x, y" percentage. For path: use SVG path syntax assuming 100×100 viewBox.
- Customize the preview's width / height / background to test against your actual layout.
- Output includes
-webkit-clip-pathprefix for older WebKit browsers (still needed for Safari <14). - Copy CSS, copy HTML, or download as
clip-path.css.
Frequently Asked Questions
When should I use clip-path instead of overflow: hidden or border-radius?
Use overflow: hidden with border-radius when you only need rounded rectangles, it is cheaper and works everywhere. Reach for clip-path when the shape is not a rounded box: diagonal section dividers, arrows, hexagon avatars, or shapes you want to morph with a transition. One caution: clip-path clips painting only, the clipped element still occupies its full rectangular space in the layout.
What are the 5 clip-path function types?
polygon(x1 y1, x2 y2, …): arbitrary shape from 3+ points. circle(r at cx cy): circular clip with radius and center. ellipse(rx ry at cx cy): oval clip. inset(top right bottom left round radius): rectangle clipped from each side with optional corner radius. path(“M …”): SVG path syntax for curves and arcs.
How do I read polygon coordinates?
Each point is “x%, y%” where (0%, 0%) is top-left and (100%, 100%) is bottom-right. Points are connected in order to form the polygon, then the shape auto-closes back to the first point. Outside the polygon = clipped.
What’s inset() for?
Clips a rectangle from each side. inset(20%) trims 20% from all sides. inset(0 20% 0 0) trims only the right 20%. The optional round parameter applies border-radius to the clipped rectangle – useful for rounded card masks.
What’s path() for?
SVG path syntax for shapes that polygon can’t easily express – curves (Q/C commands), arcs (A command), or imported SVG paths. Coordinates are absolute (no percentage), assumes 100×100 viewBox. For complex hand-drawn shapes, easier to design in Figma/Illustrator and export SVG path data.
Do I need vendor prefixes?
The output includes -webkit-clip-path for Safari pre-14 and older WebKit browsers. For Chrome / Firefox / Edge / Safari 14+, the unprefixed property is enough. Including both is harmless and ensures wider compatibility.
Can I animate clip-path?
Yes – same function with same point/argument count interpolates smoothly. polygon → polygon animates if both have the same number of points. circle → circle always works. polygon → circle? No – different function types can’t morph (you’d need a polygon approximating a circle).
What about click events on clipped areas?
Elements ARE still clickable in the clipped region by default (clip-path is visual only – the element’s actual bounds still capture events). To restrict events to the visible shape, also apply pointer-events: none on the clipped area, or use shape-outside on a sibling – but neither is fully solved without scripting.
Does clip-path work on every element?
Yes – divs, images, videos, buttons, iframes. Note that scrollable content inside a clip-path may visually clip but still scroll; consider overflow: hidden on parents.
Is anything uploaded?
No. The CSS is generated entirely in your browser with JavaScript – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.