Create any CSS clip-path shape visually. Drag polygon points, choose from 12+ presets, copy production-ready CSS instantly.
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
The CSS clip-path property creates a clipping region that sets what part of an element should be shown. Parts inside the region are shown; parts outside are hidden.
| Function | Syntax | Description |
|---|---|---|
circle() | circle(50% at 50% 50%) | Circular clipping region |
ellipse() | ellipse(50% 35% at 50% 50%) | Elliptical clipping region |
inset() | inset(10% 20% 10% 20% round 8px) | Rectangular inset with optional radius |
polygon() | polygon(50% 0%, 100% 100%, 0% 100%) | Custom polygon shape |
path() | path("M 0 0 L 100 0...") | SVG path syntax |
transition.element {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 0.4s ease;
}
.element:hover {
clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
}
clip-path with basic shapes is supported in all modern browsers. The path() function has slightly less support. Use -webkit-clip-path as a fallback for older Safari versions.
CSS Border Radius Generator • CSS Grid Generator • CSS Gradient Generator • Box Shadow Generator • CSS Animation Generator
CSS clip-path is a property that clips an element to a specific shape, hiding everything outside the defined region. It supports circles, ellipses, polygons, and SVG paths — letting you create non-rectangular elements without extra markup.
Yes, completely free with no signup required. The tool runs entirely in your browser — no data is sent to any server, and it works offline once loaded.
Yes. Apply the generated CSS to any HTML element — <img>, <div>, or <video> — to mask it to the custom shape. This is commonly used for hexagonal avatars, diagonal hero sections, and shaped image galleries.
All modern browsers support clip-path with basic shapes (Chrome, Firefox, Edge, Safari). The generator outputs both clip-path and -webkit-clip-path for maximum compatibility including older Safari versions.
Yes. Add a transition: clip-path 0.4s ease to your element and change the clip-path on hover or via JavaScript. Both states must use polygon() with the same number of points for smooth morphing. The animation example in the guide above shows the exact pattern.
Border radius, box shadow, gradients, flexbox, grid — all free, no signup.
Browse All Free Tools →