CSS Clip-path Generator — Polygon, Circle, Ellipse & Inset Online

What Is CSS clip-path?

clip-path is a CSS property that clips an element to a defined shape, masking everything outside it. It is supported in all modern browsers and works on any HTML element — <div>, <img>, <video>, and SVG elements.

Supported Shape Functions

Function	Syntax	Use Case
`polygon()`	`polygon(x1% y1%, x2% y2%, …)`	Any custom multi-point shape
`circle()`	`circle(r% at cx% cy%)`	Circular crop
`ellipse()`	`ellipse(rx% ry% at cx% cy%)`	Oval / stretched circle
`inset()`	`inset(top% right% bottom% left% round r%)`	Rectangular crop with rounded corners

How to Use

Choose a shape type — Polygon, Circle, Ellipse, or Inset using the tabs
Drag handles — in Polygon mode, drag the blue circles on the preview to reposition points
Add or remove points — click + Point to add a new polygon vertex, or Remove to delete the selected one
Apply a preset — choose from Triangle, Rhombus, Hexagon, Arrow, Star, Circle, or Ellipse
Adjust sliders — for Circle, Ellipse and Inset, use the sliders to fine-tune radius and position
Copy CSS — click Copy to copy the clip-path declaration to your clipboard

Polygon Coordinates

All values are percentages relative to the element’s bounding box:

0% 0% = top-left corner
100% 0% = top-right corner
50% 100% = bottom center
100% 50% = right center

This means the shape scales automatically with any element size.

Preset Shapes

Preset	Points	Description
Dreieck	3	Equilateral triangle pointing up
Rhombus	4	Diamond / rotated square
Hexagon	6	Regular flat-top hexagon
Pfeil	7	Left-pointing arrow
Stern	10	5-pointed star

Browser Support

clip-path with shape functions is supported in Chrome 55+, Firefox 54+, Safari 9.1+, and Edge 12+. No vendor prefixes are needed in modern browsers.

Privacy

All clip-path generation and preview rendering happens locally in your browser. No shape data or CSS code is ever sent to a server.

FAQ

What is CSS clip-path?

clip-path is a CSS property that clips an element to a defined shape, hiding everything outside that shape. It supports polygon() for custom multi-point shapes, circle() and ellipse() for round shapes, and inset() for rectangular cutouts with optional rounded corners. The original element remains in flow; only its visible area changes.

What shape types does this generator support?

The generator supports all four CSS clip-path basic shapes: Polygon (drag any number of points freely), Circle (radius + center position), Ellipse (two radii + center), and Inset (rectangular crop with optional corner rounding). Switch between types using the shape tabs.

How do I move the polygon handles?

In Polygon mode, drag any blue circle on the preview to reposition that point. The clip-path value updates live as you drag. You can also add points with the + button or remove the selected point. All percentages are relative to the element size, so the shape scales correctly with any element dimensions.

Can I use clip-path on images?

Yes. clip-path works on any HTML element including <img>, <video>, <div>, and SVG. Apply the generated clip-path property to any element. Combine it with object-fit: cover on images to keep the image centered while clipping to your custom shape.