CSS Clip-Path Generator

CSS clip-path generator

This tool builds CSS clip-path: polygon(...) shapes visually and gives you the exact value to paste into your stylesheet. It is for developers cutting elements into triangles, hexagons, arrows, stars and custom outlines for badges, section dividers and decorative images. Start from a preset, drag the vertices, and copy.

How it works

The CSS clip-path property with the polygon() function clips an element to the area enclosed by a list of vertices. Each vertex is an x% y% pair measured from the top-left corner of the element’s box: 0% 0% is top-left and 100% 100% is bottom-right. The generator stores your points, joins them as x% y% pairs, and outputs polygon(p1, p2, …). A checkerboard background behind the preview shows which regions are clipped away (transparent) versus kept. You can pick a preset, edit any vertex’s coordinates, or add and remove points for a custom polygon (a minimum of three is required).

Example

The triangle preset uses three vertices — top-centre, bottom-right, bottom-left:

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

The element keeps its full box for layout, but only the triangular region is painted; everything outside it becomes transparent.

Everything runs locally in your browser — nothing is uploaded.