CSS clip-path generator

Build polygon, circle, ellipse, or inset clip paths with a live preview. Drag points on the canvas or edit percentages in the table.

~~~

Shape

Preview

Controls

#	X %	Y %

Radius %

Center X %

Center Y %

Radius X %

Radius Y %

Center X %

Center Y %

Top

Right

Bottom

Left

Round

~~~

Generated CSS

~~~

About this tool

clip-path masks an element to a shape. Polygons use percentage coordinates relative to the box. Circle and ellipse use the at keyword for placement. Inset clips from the edges inward, with optional rounded corners.

URL query params store your shape for sharing — short enough for bookmarks, never for pasted content.

~~~

Related tools

Free books, courses, and software

Get my programming books, course editions, and complete software.

Get the download library →