CSS Clip Path Generator
Visually build CSS clip-path shapes. Drag the handles to reshape, choose from presets, then copy the CSS for any element.
Presets
Points (5)
overflow: hidden on the parent for clean edges.About the CSS Clip Path Generator
The clip-path CSS property lets you define a visible region for an element — everything outside the path is hidden. This tool gives you a visual editor for all four clip-path shape types, so you never have to hand-write percentage coordinates again.
Shape Types
Polygon
Define any shape with a series of percentage-based x/y coordinates. Drag handles directly on the canvas, or choose from presets like triangle, hexagon, arrow, or star.
clip-path: polygon(50% 0%, 100% 100%, 0% 100%) Circle
Clip to a circle with adjustable radius and center position. Ideal for avatar images and circular icon crops.
clip-path: circle(50% at 50% 50%) Ellipse
Like circle but with independent x and y radii. Useful for oval hero section cutouts and curved image crops.
clip-path: ellipse(50% 30% at 50% 50%) Inset
Clip to a rectangle defined by top/right/bottom/left insets from the element's edges. Add optional border-radius for rounded corners.
clip-path: inset(10% 10% 10% 10% round 5%) Common Use Cases
- Hero section diagonal cuts — use polygon to create a diagonal bottom edge on a banner
- Circular avatars — circle or ellipse clip on profile images without border-radius hacks
- Decorative shapes — hexagons, stars, and arrows for icon backgrounds and cards
- Animated reveals — animate
clip-pathbetween shapes for creative transitions - Text cropping — clip decorative large text to a background image
Browser Support
clip-path is supported in all modern browsers. For animating between two polygon shapes, both must have the same number of points — add extra coincident points to the simpler shape if needed.