Clip-path Generator | Visual CSS clip-path maker with sliders (free)

clip-path is a CSS property that clips an element to a shape — polygon, circle, ellipse and more. This free generator lets you build the clip-path value by dragging and copy it instantly. No signup, no watermark, free for commercial use.

What is clip-path?

clip-path clips the visible area of an element to a shape. You can use basic shapes like polygon(), circle(), ellipse() and inset() to mask images, cut diagonal sections, speech bubbles, arrows, stripes and checkerboards — with pure CSS and no image editing.

How to use (3 steps)

Choose a shape type (polygon / circle / ellipse / inset). For polygons, pick a preset to start fast.
Drag the points on the preview to fine-tune. Double-click to add a point, double-click a point to remove it.
Click “Copy code” to get the CSS with clip-path and -webkit-clip-path, then paste it onto your element.

Basic shapes

Function	Use	Example
`polygon()`	Triangles, hexagons, arrows and any custom polygon	`polygon(50% 0, 0 100%, 100% 100%)`
`circle()`	Crop to a circle (avatars, icons)	`circle(50% at 50% 50%)`
`ellipse()`	Wide or tall ellipses	`ellipse(50% 35% at 50% 50%)`
`inset()`	Inset rectangle (with optional rounding)	`inset(10% round 12px)`

Tips & gotchas

Older browsers: include -webkit-clip-path (this tool adds it automatically).
Animation: to transition between two polygon shapes smoothly, keep the same number of points.
Shadows: clip-path also clips box-shadow. To keep a shadow, use filter: drop-shadow() on the parent.

FAQ

Is the clip-path generator free?

Yes. It is completely free with no signup and no watermark. The generated code is yours to use commercially.

Do I need -webkit-clip-path?

Adding it is safer for older Safari and Chrome. This tool outputs both clip-path and -webkit-clip-path automatically.

Can I add or remove points?

Yes. Double-click the preview to add a point on the nearest edge, and double-click a point to remove it (minimum 3).

Can clip-path be animated?

Yes. Two polygon shapes with the same number of points transition smoothly. Enable “Animate on hover” to output the transition and hover code.

Which browsers are supported?

clip-path works in Chrome, Safari, Edge and Firefox. The basic shapes (polygon/circle/ellipse/inset) are widely supported.