# CSS clip-path Generator - Drag Polygons, Circles & Insets

> Visual CSS clip-path maker: drag polygon points or use circle, ellipse and rounded inset. 25 presets (arrow, star, speech bubble) previewed on your image.

- URL: https://qilingtools.com/en/css-clip-path
- Category: Developer Tools (https://qilingtools.com/en/dev)
- Tags: [Design](https://qilingtools.com/en/tags/design), [Developer](https://qilingtools.com/en/tags/dev), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

clip-path cuts any element into a polygon, circle, ellipse or rounded rectangle — handy for angled banners, hexagon avatars, arrow buttons, speech bubbles and other non-rectangular images, with no extra images or SVG. Here you edit the shape directly on an image: drag points to move them, double-click near an edge to insert a point, right-click or Alt-click to delete one, nudge the selected point with the arrow keys, or snap to a 5% grid. Circles and ellipses have center and radius handles, and inset has four draggable edges plus a corner radius. 25 presets are built in — triangle, trapezoid, parallelogram, rhombus, pentagon through decagon, bevel, rabbet, star, left and right arrows, chevrons, cross, close (X), message bubble, frame, tag and ribbon — and you can generate a regular polygon or star with any number of sides. Preview on your own uploaded image, with the clipped-away area shown faintly. The CSS can use percentages or pixels (converted from the reference size you set), optionally with a -webkit-clip-path line for older Safari, and you can paste an existing polygon(...) to keep editing it.

## How to use

1. Choose a shape type or click a preset, and optionally upload your own image
2. Drag points or handles on the image; double-click an edge to add a point, right-click to remove one
3. Pick % or px and whether to add the -webkit- prefix, then copy the CSS

## Features

- Polygon, circle, ellipse and inset shapes
- Edit on the image: double-click to add, right-click to delete, arrow keys to nudge
- 25 presets including arrows, star, message bubble and frame
- Regular polygons and stars with any number of sides
- Preview on your own image with the clipped area ghosted
- Percent or pixel units, optional -webkit- prefix
- Import an existing polygon() to keep editing
- Grid snapping and exact coordinate inputs

## FAQ

### Should I use percentages or pixels?

Percentages are relative to the element’s own width and height, so the shape scales with the element — the usual choice for responsive layouts. Pixels give a fixed shape, which suits fixed-size icons or buttons. When you pick px, the tool converts from the reference width and height you enter. A circle’s percentage radius is measured against the diagonal ÷ √2, which equals the side length for a square.

### Do I still need -webkit-clip-path?

Current Chrome, Edge, Firefox and Safari all support unprefixed clip-path with basic shapes. The -webkit- prefix only matters for Safari versions before 13.1. The tool outputs both lines by default; the prefixed one comes first and doesn’t affect modern browsers.

### Can the clipped area still be clicked? Does it affect layout?

clip-path changes only what’s visible and clickable: the clipped-away part is not painted and doesn’t receive clicks or hover, but the element keeps its full size in the layout, so nothing around it moves. To make text flow around a shape, use shape-outside as well.

### Can I add a border or shadow to a clipped element?

Not directly — border and box-shadow are clipped too. A common trick is a wrapper with the same clip-path and a background color, with the inner element clipped slightly smaller to form the border. For shadows, put filter: drop-shadow() on a parent; it follows the clipped shape. clip-path can also be animated with transitions as long as both polygons have the same number of points.

## Related tools

- [JSON Formatter](https://qilingtools.com/en/json): Free online JSON formatter: beautify or minify, validate with the exact line and column of any error, browse a collapsible tree, sort keys and escape strings.
- [Base64 Encode/Decode](https://qilingtools.com/en/base64): Free online Base64 encoder and decoder: UTF-8 safe, optional URL-safe variant, convert text to Base64 and back in real time. Processed locally, never uploaded.
- [URL Encode/Decode](https://qilingtools.com/en/url-encode): Free online URL encoder and decoder with encodeURIComponent and encodeURI modes. Escapes Chinese, spaces and special characters. Real-time and local, no upload.
- [JWT Decoder](https://qilingtools.com/en/jwt): Free online JWT decoder: decode the header and payload of a JSON Web Token, show expiry and issued-at times, all locally without uploading the token.
- [Timestamp Converter](https://qilingtools.com/en/timestamp): Free online Unix timestamp converter: convert timestamps and dates, auto-detect seconds or milliseconds, and show local, UTC, ISO 8601 and relative time.
- [Hash / Checksum](https://qilingtools.com/en/hash): Free online hash calculator: SHA-1, SHA-256, SHA-384 and SHA-512 of text or any file through the browser crypto API. Files never leave your device.
- [UUID Generator](https://qilingtools.com/en/uuid): Free online UUID generator: create RFC 4122 UUID v4 in bulk with a cryptographic RNG. Options for uppercase, no hyphens and braces, with one-click copy.
- [Base Converter](https://qilingtools.com/en/base-convert): Free online number base converter: convert between binary, octal, decimal, hexadecimal and any base 2–36. Uses BigInt for huge integers, computed locally.