Clip-Path Generator

What this tool does

The Clip-Path Generator builds a CSS clip-path value visually. You pick from a library of preset shapes — triangle, trapezoid, rhombus, pentagon, hexagon, octagon, star, arrow, circle, ellipse and inset — or switch into the polygon editor and set every vertex coordinate yourself. The chosen clip is applied live to a preview box that you can fill with a solid colour or a sample image, and the resulting declaration is shown as copyable code. All of it runs in your browser with no upload.

clip-path is one of the most expressive layout properties in CSS. It lets a plain rectangular element appear as almost any flat shape without extra markup, SVG files or background images. The catch is the syntax: a polygon() is a long list of percentage pairs, and a stray number turns a clean hexagon into a mess. This tool keeps the value correct while you experiment.

Use cases

In web design, clipped shapes give sections distinctive edges — angled hero banners, diagonal dividers between bands of colour, or chevron-shaped step indicators. For branding, a custom polygon can echo a logo’s geometry across buttons and cards. Illustrators and prototypers use the star, arrow and hexagon presets to compose badges, callouts and decorative grids without opening a vector editor. In product UI, circle and ellipse clips create spotlight effects and rounded media thumbnails, while the inset shape is handy for revealing part of an element during an animation. Because the clip does not affect layout, it is also a safe way to add visual interest to an existing design without risking reflow.

How to use it

1. Choose how the preview is filled — a colour (with a native picker and hex field) or a sample image.
2. Pick a shape preset. Geometric presets load straight into the polygon editor; circle, ellipse and inset show their own sliders.
3. For a polygon, edit any vertex’s X and Y percentage, or use Add point and Remove to change the number of corners (minimum three).
4. For circle, ellipse or inset, drag the sliders to set radius, centre or edge offsets.
5. Watch the preview update on every change, then click Copy CSS to copy the full clip-path declaration.
6. Use Reset to return to the default triangle.

Tips

Start from the closest preset and nudge its vertices rather than drawing from scratch — it is far quicker. Remember that 0% 0% is the top-left corner, so to push a point toward the bottom you raise its Y value. Keep symmetric shapes symmetric by mirroring X values around 50%. For diagonal section dividers, a four-point polygon with two corners at 0%/100% and the other two offset vertically gives a clean slope. When clipping an image, test with a busy photo: shapes that look fine on a flat colour can crop important detail. If a shape must animate, keep the same number of points in every keyframe so the browser can interpolate between them smoothly.

Related techniques

clip-path sits alongside border-radius for rounding and mask-image for soft, gradient-based reveals — pick whichever matches the edge you need. For a single hard-edged triangle made purely from borders, the CSS Triangle Generator produces a lighter-weight result. Combine clipped shapes with box-shadow carefully: a shadow follows the original box, not the clip, so use a filter: drop-shadow() instead when you want the shadow to trace the shape. Since the output is standard CSS, it works in any stylesheet, framework or CSS-in-JS setup without modification.