CSS Clip Path Generator

CSS clip-path hides parts of an element based on a geometric shape — a polygon, circle, or ellipse — so you can create non-rectangular sections without masks, SVG overlays, or manual image cropping. Slanted dividers between page sections, hexagonal avatars, arrow shapes on buttons, decorative hero cuts: all of these are clip-path in a single line of CSS. The element's layout still occupies the full rectangle; only the rendering is clipped, which means hit targets work normally and text reflows correctly around the clipped area.

The most useful clip-path function is polygon(), which takes any number of x y pairs (percentages relative to the bounding box) and connects them into a closed shape. polygon(50% 0%, 100% 100%, 0% 100%) is a downward-pointing triangle; four points make a quadrilateral; more points make stars, arrows, or any freeform polygon. Our editor lets you drag the vertices directly on the preview to shape the polygon visually and copy the resulting CSS.

Presets cover common shapes. Triangles, trapezoids, parallelograms, pentagons, hexagons, stars, right arrows, and chevrons are all one click. From any preset you can adjust the vertices for a custom variant — the randomiser is intentional: CSS polygons look dramatic even when the point placement is slightly off from a theoretical ideal, so hand-tuning produces organic shapes that look hand-made.

Browser support is universal for clip-path: polygon() and other basic shapes. Some older legacy reference clip paths (using SVG <clipPath>IDs) are limited to Chromium-family browsers, but the polygon-based shapes this tool generates work everywhere.

Animation of clip-path is supported and GPU-accelerated. You can animate between polygons that have the same number of points — the browser interpolates each vertex smoothly. Classic uses: section dividers that animate on scroll, reveal effects, morphing buttons. If you need to animate between shapes with different vertex counts, pad the shorter one with duplicate vertices so both have the same count.

Practical tips: keep vertices between 0% and 100% to stay inside the element's bounding box; outside values work but clip at the box edges. For responsive shapes that scale with content, percentages are correct; for fixed-pixel precision, use px values. Remember that overflow: hidden is not required — clip-path clips even when the element overflows.

1. Pick a preset from the gallery for a quick start.
2. Drag vertices on the preview to reshape. Double-click a vertex to remove it.
3. Add vertices using the Add button in the sidebar for complex polygons.
4. Copy the CSS — the generated polygon() function is production-ready.

• Eight built-in shape presets.
• Drag-and-drop vertex editor on a live preview.
• Add and remove vertices for arbitrary polygons.
• Copy-ready CSS and Tailwind class.
• Runs in your browser — no server round-trip.