✂️ CSS Clip Path Generator
Pick a shape or polygon and clip an element to it, then copy the clip-path CSS. The preview shows the clipped shape live.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);How the css clip path generator works
clip-path hides everything outside a defined shape, so a rectangular element can appear as a triangle, hexagon, star, circle or custom polygon. This generator offers ready shapes plus adjustable polygon points, previews the clip on a sample element, and writes the clip-path value. Polygon shapes are defined as a list of X Y percentage points; circles and ellipses use a radius and position. The output is standard CSS produced in your browser, with the original box still taking its normal layout space.
clip-path changes what is painted, not the element's layout box, so surrounding content still flows around the original rectangle. Clipped edges are crisp and scale cleanly because they are vector-defined. For interactive hit areas, note that clicks still register on the clipped-away corners unless you also adjust pointer handling.
Frequently asked questions
What is clip-path in CSS?
clip-path defines a region of an element to show; everything outside that region is hidden. With the polygon(), circle(), ellipse() and inset() functions you can clip an element into triangles, hexagons, stars, circles and custom shapes without images.
How do I make a triangle with clip-path?
Use polygon() with three points, for example clip-path: polygon(50% 0, 0 100%, 100% 100%) for an upward triangle. The generator lets you pick a triangle preset and copy the code.
Does clip-path affect the element's layout?
No. It changes what is painted, not the layout box, so other elements still flow around the original rectangle's dimensions. Add margins if you need spacing around the visible shape.
Can I animate clip-path?
Yes, between shapes with the same number of points (for polygons), which enables reveal and morph animations. Keep point counts equal for smooth transitions.
Is my shape uploaded?
No. The clip-path CSS is generated in your browser and never sent to a server.