Skip to content
Convertto

Clip Path Generator — Polygons, Circles and Insets

Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path.

clip-path cuts an element down to a shape, hiding everything outside it. Percentages are relative to the element's own box, so one value works at any size — a hexagon stays a hexagon whether the element is 40 pixels wide or 400. Polygons take a list of corner points; circle, ellipse and inset take a size and a position. The clipped area stops receiving pointer events too, so a clipped button is only clickable where you can see it.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Does clip-path hide the border too?

Yes. It clips everything the element paints, borders and outlines included. If you need an outline on a clipped shape, draw it as an SVG stroke over the same path.

Are the clipped parts still clickable?

No. Pointer events are clipped along with the paint, so the corners you cut off stop responding to clicks and hovers. That is usually what you want, and it is why clip-path beats a decorative overlay.

Why use percentages rather than pixels?

Percentages resolve against the element's own box, so the same clip-path works at every size and in every breakpoint. Pixel values pin the shape to one element size and distort as soon as it changes.

How to use the css clip path generator

  1. 1Pick a shape family — a polygon, a circle, or a rectangle with its corners cut in.
  2. 2Adjust the sides or inset and watch the element get cut to it.
  3. 3Copy the clip-path, or take the Tailwind class if that is your stack.

Embed this tool

Put the working css clip path generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.Blob Shape GeneratorDesign organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.CSS Shape GeneratorGenerate triangles, arrows, stars and other shapes using pure CSS.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Clamp GeneratorGenerate fluid clamp() values that scale smoothly between two viewport widths.

Last updated

More css generators