# 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.

**URL:** https://convertto.tech/t/css-clip-path-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [Blob Shape Generator](https://convertto.tech/t/blob-shape-generator): Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.
- [CSS Shape Generator](https://convertto.tech/t/css-shape-generator): Generate triangles, arrows, stars and other shapes using pure CSS.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [CSS Multi-Column Generator](https://convertto.tech/t/css-columns-generator): Flow text into balanced columns with a rule between them.
- [CSS Hover Effect Generator](https://convertto.tech/t/css-hover-effects-generator): Generate a hover effect that animates cleanly, with the reduced-motion guard included.
- [CSS Flexbox Generator](https://convertto.tech/t/flexbox-generator): Experiment with flex direction, alignment and wrapping, then copy the CSS.
- [CSS Media Query Generator](https://convertto.tech/t/media-query-generator): Generate responsive breakpoint media queries, with common device presets.