Every clip-path function — circle, ellipse, inset, polygon, and path — with a live polygon editor, shape gallery, animation demos, and text masking.
clip-path defines a clipping region. Everything inside is visible. Everything outside is hidden. It doesn't affect layout — the element still occupies its normal space.
| function | syntax | use case |
|---|---|---|
| circle() | circle(radius at cx cy) | Round avatars, pills, spotlight effects |
| ellipse() | ellipse(rx ry at cx cy) | Oval shapes, squished circles |
| inset() | inset(top right bottom left round r) | Rectangular crops, rounded insets |
| polygon() | polygon(x1 y1, x2 y2, …) | Any shape — triangles, hexagons, stars, arrows |
| path() | path('M…Z') | Exact SVG paths — irregular curves |
| none | clip-path: none | No clipping — default |
Clips to a circle. Radius can be a length, percentage, closest-side, or farthest-side. Center defaults to 50% 50%.
Like circle but with separate horizontal (rx) and vertical (ry) radii. Great for egg shapes, wide ovals, and squished circles.
Clips to a rectangle inset from the edges. The optional round keyword adds border-radius to the clipped corners.
A series of X Y coordinate pairs defining a custom shape. Minimum 3 points. Drag handles to reshape in real time.
Click any shape to see its code and load it into the tester above.
Type any clip-path value and see it applied instantly.
clip-path animates smoothly between values when the point count matches. Hover or click each demo.
Clips a background gradient to the text shape itself. Combined with -webkit-text-fill-color: transparent, it creates gradient text.
| function | syntax |
|---|---|
| circle() | circle([r] at [cx] [cy]) |
| ellipse() | ellipse([rx] [ry] at [cx] [cy]) |
| inset() | inset([top] [right] [bottom] [left] round [r]) |
| polygon() | polygon([fill-rule,] x1 y1, x2 y2, …) |
| path() | path('[SVG path data]') |
| tip | code |
|---|---|
| Circle avatar | clip-path: circle(50%) |
| Hover reveal | clip-path: inset(0 100% 0 0) → inset(0) |
| Diagonal section | clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%) |
| Smooth morph | Same point count between keyframes |
| Gradient text | background-clip: text + text-fill-color: transparent |
| will-change hint | will-change: clip-path for animated elements |