CSS Clip Path Generator
Build custom CSS clip-path polygon shapes with a visual point editor. Drag points to reshape, add/remove vertices, or start from 13 preset shapes. Copy production-ready clip-path CSS.
.shape { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
About CSS Clip Path Generator
CSS clip-path lets any HTML element render as a custom shape by clipping its content to a polygon path. Common uses: hexagon avatar frames, chevron section separators, arrow-shaped tooltips, star ratings, ribbon shapes, and decorative image masks. This generator provides a visual polygon editor with draggable points, 13 preset shapes (triangle, hexagon, star, chevron, arrow, cross, message, and more), and a live preview that clips a gradient or an image you supply.
The tool exposes the raw polygon coordinates so you can fine-tune point positions after picking a preset, or build entirely custom shapes from scratch. Great for pinning down the exact polygon() CSS you need without opening Illustrator, prototyping decorative shapes, and teaching yourself how the polygon() function works. Test with your own images by pasting a URL — the shape masks the image, which is often the final use case.
How to Use
Pick a preset (Triangle, Hexagon, Star, Chevron, etc.) to start from, or build from scratch.
Drag any point to reshape. Points are constrained to 0-100% of the container size.
Add a new point with + Add point (inserts near the last vertex). Remove any point with the × button next to it.
Test with your own image by pasting a URL — the preview will clip that image to your shape.
Copy the generated clip-path CSS and apply it to any element.
Frequently Asked Questions
What is clip-path?
A CSS property that hides parts of an element outside a defined shape. Supports polygon(), circle(), ellipse(), inset(), and SVG path()/url() references. This tool focuses on polygon(), the most flexible option.
Does clip-path affect element size?
No — the element still occupies its full box for layout. clip-path only affects what's painted. Content outside the clip is invisible but still 'there' — click events on hidden parts don't fire but layout is unchanged.
How does clip-path compare to SVG masks?
clip-path is faster (GPU-composited), simpler syntax, and works on any HTML element. SVG masks allow gradient/alpha-based masking. For hard-edged shapes, use clip-path. For soft edges or texture-based clipping, use mask-image or SVG masks.
Can I animate clip-path?
Yes — CSS transitions on clip-path between the same shape type (both polygon with same number of points) morph smoothly. Between different shape types, the transition snaps rather than tweens. For complex path animations, use the individual point coordinates as CSS custom properties and animate them.