Clip Path Generator

Create CSS clip-path shapes: circles, ellipses, polygons, and inset rectangles with live preview.

Live Preview

circle(50% at 50% 50%)

Shape Controls

Radius50%

Generated CSS

css

.element {
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
}

Shape Gallery

Click any shape to apply it

Clip-path reference

• circle(r at x y) — circular crop, radius in % or px

• ellipse(rx ry at x y) — elliptical crop

• polygon(x1 y1, x2 y2, ...) — arbitrary polygon

• inset(t r b l) — rectangular crop with inset offsets

• Use -webkit-clip-path for Safari compatibility

• Combine with transition for animated reveals